Javascript 面向对象中的构造函数和原型对象

microcosm1994 发布于2019-08-21 10:33 / 560人阅读

摘要：每一个对象除外都和另外一个对象相关联，这个另外一个对象就是我们熟知的原型，每一个对象都从原型继承属性和行为方法。两个构造函数的属性可能指向同一个原型对象，这时通过调用两个构造函数创建的实例是属于同一个类的。

先解释下原型。每一个Javascript对象(null除外)都和另外一个对象相关联，这个“另外一个对象”就是我们熟知的原型，每一个对象都从原型继承属性和行为(方法)。

var   a = {}; //原型对象为Object.prototype
var   array = new Array()// 原型对象为Array.prototype
var   myInstance = new MyClass;// 原型对象为MyClass.prototype

在Javascript中，类的所有实例对象都从同一个原型对象上继承属性，下面先看一个例子

function Range是 Range类的构造函数用以初始化新创建的Range类的对象，构造函数并没有创建并返回一个对象，仅仅是初始化，并且在构造函数中用this设置的属性不是每个实例共享的，而是独享的，this是对当前对象的应用。

function Range(from, to) {
          if(from)
               this.from = from;//对象的自有属性，在对象中会覆盖从原型那里继承来的from值
          if(to)
               this.to = to; 
}

而所有对象实例都会继承的属性和行为(方法)都在原型对象里

Range.prototype = {
     includes : function(x) {return this.from <= x && x <= this.to},
     
     foreach : function(f) {
           for(var x = Math.ceil(this.form); x < this.from; x++)  f(x);
    },
    
    toString : function() {return "(" + this.from + "......" + this.to + ")";},
    
    from : 1,

    getBeginning : function() {return this.from}
}

var r = new Range(2, 5);
r.include(3);// true , 3在范围内
r.foreach(alert);//输出2 3 4 5
console.log(r)//
r.getBeginng() // 2 因为在构造函数初始化r的时候已经把属性“from”设置成2了

任何Javascript函数都可以做构造函数，并且用new 关键字调用构造函数时是要用到一个prototype属性的。因此每个javascript函数都会自动拥有一个prototype属性。比如

Range.prototype.init = function () {}
nr = new Range.prototype.init();// nr 的属性继承自Range.prototype.init.prototype

原型对象是类的唯一标示，当且仅当两个对象继承自同一个原型对象时，他们才是属于同一个类的实例，而初始化对象的构造函数则不能作为类的标示。两个构造函数的prototype属性可能指向同一个原型对象，这时通过new调用两个构造函数创建的实例是属于同一个类的。

上面的例子继续修改

Range.prototype.init.prototype = Range.prototype;//引用传递所以不用担心循环引用;

这样通过new Range()和 new Range.prototype.init()创建的对象都是属于Range类的。

console.log((r instanceof Range)); //true
console.log((nr instanceof Range)); //true

GPU云服务器云服务器 javascript 面向对象 javascript面向对象 javascript面向对象编程 javascript面向对象编程指南

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85761.html

JS对象(1)重新认识面向对象

摘要：对象重新认识面向对象面向对象从设计模式上看，对象是计算机抽象现实世界的一种方式。除了字面式声明方式之外，允许通过构造器创建对象。每个构造器实际上是一个函数对象该函数对象含有一个属性用于实现基于原型的继承和共享属性。 title: JS对象(1)重新认识面向对象 date: 2016-10-05 tags: JavaScript 0x00 面向对象从设计模式上看，对象是...

superw 2019-08-21 11:17 评论0 收藏0
面向对象的 JavaScript

摘要：是完全的面向对象语言，它们通过类的形式组织函数和变量，使之不能脱离对象存在。而在基于原型的面向对象方式中，对象则是依靠构造器利用原型构造出来的。 JavaScript 函数式脚本语言特性以及其看似随意的编写风格，导致长期以来人们对这一门语言的误解，即认为 JavaScript 不是一门面向对象的语言，或者只是部分具备一些面向对象的特征。本文将回归面向对象本意，从对语言感悟的角度阐述为什...

novo 2019-08-21 10:49 评论0 收藏0
重新认识JavaScript面向对象: 从ES5到ES6

摘要：基于原型的面向对象在基于原型的语言中如并不存在这种区别它只有对象不论是构造函数，实例，原型本身都是对象。允许动态地向单个的对象或者整个对象集中添加或移除属性。为了解决以上两个问题，提供了构造函数创建对象的方式。 showImg(https://segmentfault.com/img/remote/1460000013229218); 一. 重新认识面向对象 1. JavaScript...

VishKozus 2019-08-30 13:56 评论0 收藏0
重新认识JavaScript面向对象: 从ES5到ES6

摘要：基于原型的面向对象在基于原型的语言中如并不存在这种区别它只有对象不论是构造函数，实例，原型本身都是对象。允许动态地向单个的对象或者整个对象集中添加或移除属性。为了解决以上两个问题，提供了构造函数创建对象的方式。 showImg(https://segmentfault.com/img/remote/1460000013229218); 一. 重新认识面向对象 1. JavaScript...

用户83 2019-08-26 11:38 评论0 收藏0
浅谈JavaScript面向对象

摘要：不必在构造函数中定义对象实例的信息。其次，按照一切事物皆对象的这饿极本的面向对象的法则来说，类本身并不是一个对象，然而原型方式的构造函数和原型本身也是个对象。第二个问题就是在创建子类型的实例时，不能向超类型的构造函数中传递参数。前言对象(Object)应该算是js中最为重要的部分，也是js中非常难懂晦涩的一部分。更是面试以及框架设计中各出没。写这篇文章，主要参考与JavaScrip...

cyixlq 2019-08-21 17:15 评论0 收藏0