__proto__与prototype的理解

这篇文章主要 解决的问题 是：什么是 __proto__？什么是 prototype？他们的关系是什么？在原型链中扮演什么角色？

proto和prototype

1. prototype是函数的一个属性，在定义构造函数的时候自动创建，它指向函数的原型，被 __proto__指向。这个原型对象里包含着自定义的方法属性。
2. __proto__是对象的内部属性，它指向构造器的prototype，对象依赖它来进行原型链的查询，instanceof方法也是依赖它来判断是否存在继承关系。
3. prototype只能作为构造函数的属性，而__proto__可以作为任意对象的属性。

proto、prototype和原型链之间的联系

看一段代码：

function Foo(name) { this.name = name };
 Foo.prototype.age = 18;
 let student = new Foo("holy");

我们通过一张图来表示这段代码构建的原型链：

这张图中原型链可分成两部分：

student ---> Foo.prototype ---> Object.prototype ---> null

Foo ---> Function.prototype ---> Object.prototype ---> null

我们从 对象student 看起：根据 概念3 , prototype 只能作为构造函数的属性，__proto__只能作为对象的属性。所以对象sutdent 只有__proto__，没有prototype。

student.prototype;
undefined

而 student对象 是Foo构造函数的一个实例，根据 概念2 它的__proto__指向Foo.prototype

student.__ptoto__ == Foo.prototype;
true

以为 Foo.prototype 是一个对象，所以 Foo.prototype.__proto__指向 Object.prototype

Foo.prototype.__proto__ == Object.prototype;
true

再来看第二部分：
Foo 是一个函数，所以 Foo.__proto__指向 Function.prototype

Foo.__proto__ == Function.prototype
true

再 JavaScript 中函数都是第一公民，而且函数也是对象，所以Function.prototype.__proto__指向 Object.prototype

Function.prototype.__proto__ == Object.prototype
true

原型链的工作流程

1. student.name 在student中找到 name属性，返回“holy”；
2. student.age 在student中未找到，于是通过student.__proto__在Foo.prototype中找到，返回 18；
3. student.toString() 在student中未找到，接着通过student.__proto__在Foo.prototype中寻找，未找到，继续通过Foo.prototype.__proto__在Object.prototype中寻找，找到了，返回‘[object object]’。
4. student.getWeight() 依次在student、Foo.prototype、Object.prototype中寻找，均未找到，抛出错误。