javascript Prototype constructor的理解

转载注明出处：点击打开链接

Prototype属性

a)      Prototype:每一个函数都包含一个prototype属性，这个属性指向的是一个对象的引用；而对于每一个函数（类）的实例都会从prototype属性指向的对象上继承属性，换句话说通过同一个函数创建的所有对象都继承一个相同的对象。

b)      通过new 关键字和构造函数创建的对象的原型，就是构造函数的prototype指向的那个对象

 

下面通过一个函数可以解释a b两条说明的问题，代码如下

function A(name){  
      this.name = name;  
}  
var a1 = new A("aa1");  
var a2 = new A("aa2"); 

用chrome的take heap snapshot可以看到下面的东西

分析说明：如图1.2,可以发现a1、a2对象的_proto_右边的@后面的值都是1426796，等于Prototype对象岁代表的@1423679，所以有如下关a1.__proto__ ==== a2.__proto__=== A.prototype

   用图像直观表示如下：

                                                                          图 1.3

到此说明了a,b两点是正确的。

同事上面的也可以论证一下观点（该观点摘自javascript权威指南）：

1）  同一个类的所有实例都从同一个原型对象上继承属性

2）  当且仅当两个对象继承自同一个原型对象时，他们才是属于同一个类的实例

特别说明：只有构造函数才有prototype属性，而构造函数的实例是没有该属性的，也就是说console.log(a1.prototype)输出的是undefined。在javascript中，每个函数都自动有一个prototype属性，而不是每一个对象拥有prototype属性

  原型属性与实例对象的创建与否没有关系，它在对象创建之前就已经存在

Constructor属性

  观察上图蓝色背景部分，每一个函数的Prototype属性指向的对象都包含唯一一个不可枚举属性constructor,该属性的值是这么一个对象：它指向了它所在的构造函数。

   如图：Prototype中的constructor指向的是functionA()这个它所在的构造函数

                                                 图   1.4

   直观表示如下图：

   

                                                                      图 1.5

此时 alert(A.prototype.constructor)的结果是：

[javascript]  view plain  copy

1. function A(name){  
2.       this.name = name;  
3. }  

通过上面的两个图，可以得到如下的结论：在Prototype属性指向的对象中存在预先定义好的constructor属性，每个构造函数的实例继承了这一属性，所以在不重写Prototype对象的情况下，实例的constructor指向它们的构造函数

Var a = new A();

a.constructor === A// =>true

如果重写了Prototype对象，代码如下：

[javascript]  view plain  copy

1.  A.prototype = {  
2.   getName:function(){return this.name}  
3. };  

此时生成的A的对象只有两个即：a1,a2,而没有Prototype对象，如下

问题出来了，那这个Prototype对象到哪儿去了呢？看绿色方框里面的@81203，通过它进行查找，在Object实例中找到了这个对象的信息

注意：新定义Prototype对象的话，该Prototype对象原有的constructor属性会丢失，该Prototype此时所指的对象（即{getName:function(){return this.name}}对象）的constructor就是Object，事实上{getName:function()}就是一个Object对象。相信如果A.prototype={getName:function(){returnthis.name}}换成这样写的话，理解起来会方便写：

Var obj = {getName:function(){}}

A.prototype = obj;

//或者这样写：

Var obj = new Object();

Obj.getName = function(){

};

A.prototype = obj;

此时用图形表示a1,a2,prototype对象的关系如下：

通过这个图可以很直观的看出：

a1.constructor ===  A//=>false

a1.constructor === Object//=>true

A.prototype.constructor === Object

.修改这个问题的办法就行给重定义的Prototype对象显式的添加一个constructor属性,修改其constructor的指向：

 

[javascript]  view plain  copy

1. A.prototype = {  
2.  constructor:A,  
3.  getName:function(){return this.name}  

那么通过chrome的Take Heap Snapshot分析得到效果图如图1.3：