JS中的prototype、__proto__与constructor

1.前言

做为一名前端工程师，必须搞懂JS中的prototype、__proto__与constructor属性，相信不少初学者对这些属性存在许多困惑，容易把它们混淆，本文旨在帮助你们理清它们之间的关系并完全搞懂它们。这里说明一点，__proto__属性的两边是各由两个下划线构成（这里为了方便你们看清，在两下划线之间加入了一个空格：_ _proto_ _），实际上，该属性在ES标准定义中的名字应该是[[Prototype]]，具体实现是由浏览器代理本身实现，谷歌浏览器的实现就是将[[Prototype]]命名为__proto__，你们清楚这个标准定义与具体实现的区别便可（名字有所差别，功能是同样的）。

• 每一个函数都有 prototype 属性，除了 Function.prototype.bind()，该属性指向原型。
• 每一个对象都有 __proto__ 属性，指向了建立该对象的构造函数的原型。其实这个属性指向了 [[prototype]]，可是 [[prototype]] 是内部属性，咱们并不能访问到，因此使用 _proto_ 来访问。
• 对象能够经过 __proto__ 来寻找不属于该对象的属性，__proto__ 将对象链接起来组成了原型链。

console.log(Foo.__proto__ === Function.prototype);//true
console.log(Object.__proto__ === Function.prototype);//true

console.log(Function.prototype.constructor === Function);//true
console.log(Foo.constructor === Function);//true
console.log(Foo.hasOwnProperty('constructor'));//false
console.log(Object.constructor === Function);//true
console.log(Object.hasOwnProperty('constructor'));//false

console.log(Function.__proto__ === Function.prototype);//true
console.log(Function.prototype.constructor === Function);//true
console.log(Function.prototype === Function.prototype);//true

console.log(Function.prototype.__proto__ === Object.prototype);//true

 

下文既是对上面的观点进行解说：

构造函数：function Foo ( ) { };

实例对象：let f1=new Foo;
　　　　  let o1=new Foo;

以上代码表示建立一个构造函数Foo()，并用new关键字实例化该构造函数获得一个实例化对象f1。这里稍微补充一下new操做符将函数做为构造器进行调用时的过程：函数被调用，而后新建立一个对象，而且成了函数的上下文（也就是此时函数内部的this是指向该新建立的对象，这意味着咱们能够在构造器函数内部经过this参数初始化值），最后返回该新对象的引用。虽然是简简单单的两行代码，然而它们背后的关系倒是错综复杂的，以下图所示：

 

 

 

看到这图别怕，让咱们一步步剖析，完全搞懂它们！
  图的说明：右下角为图例，红色箭头表示__proto__属性指向、绿色箭头表示prototype属性的指向、棕色实线箭头表示自己具备的constructor属性的指向，棕色虚线箭头表示继承而来的constructor属性的指向；蓝色方块表示对象，浅绿色方块表示函数（这里为了更好看清，Foo()仅表明是函数，并非指执行函数Foo后获得的结果，图中的其余函数同理）。图的中间部分即为它们之间的联系，图的最左边即为例子代码。

2._ _ proto _ _ 属性

首先，咱们须要牢记两点：

　　①__proto__和constructor属性是对象所独有的；

　　② prototype属性是函数所独有的。可是因为JS中函数也是一种对象，因此函数也拥有__proto__和constructor属性，这点是导致咱们产生困惑的很大缘由之一。上图有点复杂，咱们把它按照属性分别拆开，而后进行分析：

 

 

 

第一，这里咱们仅留下 __proto__ 属性，它是对象所独有的，能够看到__proto__属性都是由一个对象指向一个对象，即指向它们的原型对象（也能够理解为父对象），那么这个属性的做用是什么呢？它的做用就是当访问一个对象的属性时，若是该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象（能够理解为父对象）里找，若是父对象也不存在这个属性，则继续往父对象的__proto__属性所指向的那个对象（能够理解为爷爷对象）里找，若是还没找到，则继续往上找…直到原型链顶端null（能够理解为原始人。。。），再往上找就至关于在null上取值，会报错（能够理解为，再往上就已经不是“人”的范畴了，找不到了，到此结束，null为原型链的终点），由以上这种经过__proto__属性来链接对象直到null的一条链即为咱们所谓的原型链。

 

3.prototype属性

第二，接下来咱们看 prototype 属性：

 

 

prototype属性，别忘了一点，就是咱们前面提到要牢记的两点中的第二点，它是函数所独有的，它是从一个函数指向一个对象。它的含义是函数的原型对象，也就是这个函数（其实全部函数均可以做为构造函数）所建立的实例的原型对象，由此可知：f1.__proto__ === Foo.prototype，它们两个彻底同样。

那prototype属性的做用又是什么呢？

它的做用就是包含能够由特定类型的全部实例共享的属性和方法，也就是让该函数所实例化的对象们均可以找到公用的属性和方法。任何函数在建立的时候，其实会默认同时建立该函数的prototype对象。

4.constructor属性

最后，咱们来看一下 constructor 属性：

 

 

 

constructor属性也是对象才拥有的，它是从一个对象指向一个函数，含义就是指向该对象的构造函数，每一个对象都有构造函数（自己拥有或继承而来，继承而来的要结合__proto__属性查看会更清楚点，以下图所示），从上图中能够看出Function这个对象比较特殊，它的构造函数就是它本身（由于Function能够当作是一个函数，也能够是一个对象），全部函数和对象最终都是由Function构造函数得来，因此constructor属性的终点就是Function这个函数。

 

 

 

感谢网友的指出，这里解释一下上段中“每一个对象都有构造函数”这句话。

　　这里的意思是每一个对象均可以找到其对应的constructor，由于建立对象的前提是须要有constructor，而这个constructor多是对象本身自己显式定义的或者经过__proto__在原型链中找到的。而单从constructor这个属性来说，只有prototype对象才有。每一个函数在建立的时候，JS会同时建立一个该函数对应的prototype对象，而函数建立的对象.__proto__ === 该函数.prototype，该函数.prototype.constructor===该函数自己，故经过函数建立的对象即便本身没有constructor属性，它也能经过__proto__找到对应的constructor，因此任何对象最终均可以找到其构造函数（null若是当成对象的话，将null除外）。以下：

 

 

 

5. 总结  

总结一下：

1. 咱们须要牢记两点：①__proto__和constructor属性是对象所独有的；② prototype属性是函数所独有的，由于函数也是一种对象，因此函数也拥有__proto__和constructor属性。
2. __proto__属性的做用就是当访问一个对象的属性时，若是该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象（父对象）里找，一直找，直到__proto__属性的终点null，再往上找就至关于在null上取值，会报错。经过__proto__属性将对象链接起来的这条链路即咱们所谓的原型链。
3. prototype属性的做用就是让该函数所实例化的对象们均可以找到公用的属性和方法，即f1.__proto__ === Foo.prototype。
4. constructor属性的含义就是指向该对象的构造函数，全部函数（此时当作对象了）最终的构造函数都指向Function。

本文就此结束了，但愿对那些对JS中的prototype、__proto__与constructor属性有困惑的同窗有所帮助。

 

原文资料出处：http://www.javashuo.com/article/p-bgvrhzjz-dy.html