理清__proto__、prototype、constructor的关系

参考文章： 原文连接：http://www.javashuo.com/article/p-bgvrhzjz-dy.html

文章目录

1. 前言
2. _ _ proto _ _ 属性
3. prototype属性
4. constructor属性
5. 总结

1. 前言

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

如今正式开始！ 让咱们从以下一个简单的例子展开讨论，并配以相关的图帮助理解：
记住这几点定义，再理解图片：

1、全部引用类型（对象、数组、函数）都有一个__proto__属性，属性值是一个普通的对象
2、全部的函数，都有一个prototype属性，属性值也是一个普通的对象
3、全部的引用类型， proto 属性值指向它的构造函数 '‘prototype’ 属性值

function Foo() {...};	
let f1 = new Foo();

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

咱们须要牢记两点：①__proto__和constructor属性是对象所独有的；② prototype属性是函数所独有的，由于函数也是一种对象，因此函数也拥有__proto__和constructor属性。

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