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

分析说明：如图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)的结果是：

function A(name){
	  this.name = name;
}

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

Var a = new A();

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

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

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

此时生成的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的指向：

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

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

(如发现理解错误指出，欢迎批评指正，相互学习）