趣悟第2期：原型链

Duang Duang Duang！！！

今天记录的是面试中关于JS的一个经典问题：说说你了解的原型链！

说到原型链，就必须放出下面这张神图啦！

不知道有没有小伙伴和我一样，刚接触原型链的时候看这张图真的是一脸懵逼。只好逼着自己一点点的去分析啦！

在说原型链之前，有必要先说明构造函数、实例对象、原型之间的关系。在使用构造函数创建实例对象的时候，就会涉及到这三个概念。

请看明晃晃的例子：

function Foo() { }
var f1= new Foo();
f1.name = 'May';
console.log(f1.name) // May

Foo就是一个构造函数，我们使用 new 创建了一个实例对象 f1.

接着就是prototype和__proto__(双下划线)的区别啦~
请看下面这三句话（很重要）：

1. 对象有__proto__属性，函数有prototype属性；

2. 对象由函数生成；

3. 生成对象时，对象的__proto__属性指向函数的prototype属性。

请看明晃晃的例子：

创建空对象时，实际上我们是用Object函数来生成对象的：

我们也可以显示的使用Object函数来创建对象：

当我们使用函数来创建自定义的对象时，上面的规则同样适用：

显而易见，实例对象f1有__proto__属性，由构造函数Foo生成。所以实例对象f1的__proto__属性指向构造函数Foo的prototype属性。
即：

因为Javascript中“一切皆对象”，所以函数自然也是对象的一种。对于函数作为对象来说，上面的规则同样适用：

函数对象都是由Function函数生成的：

我们可以看到，把函数作为对象时，生成它的函数就是Function函数。那Function函数本身呢？当然同样适用上面的规则！

Function函数本身作为对象时，生成它的函数就是他自身！！！

同样我们知道，Object函数也是一个函数对象，显然也符合上面的规则：

Object函数既然是函数，那生成它的函数自然是Function函数喽！

综上所述，可得：

大家可以看见这张图已经被拆分了一部分，那么剩下那部分怎么理解呢？

对象的__proto__属性是从生成它的函数的prototype那里得来的，那么函数的prototype又来自哪里呢？？？

一般函数默认的prototype是系统自动生成的一个对象：

一般函数默认的prototype是一个类型为"object"的对象，它有两个属性：constructor和__proto__。其中constructor属性指向这个函数自身，__proto__属性指向Object.prototype，这说明一般函数的prototype属性是由Object函数生成的。
即：

当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用。如果没有则去原型的原型中寻找,直到找到Object对象的原型，Object对象的原型没有原型，如果在Object原型中依然没有找到，则返回undefined。

请看明晃晃的例子：

f 的__proto__指向F.prototype，F.prototype.__proto__指向Object.prototype，所以 f 可以取到 a 方法，但是由于 f 的原型链上没经过 Function.prototype，所以取不到 b 方法。

由于构造函数 F 是由Function new出来的，所以F.__proto__指向Function.prototype，所以 F 函数可以取到 b 方法。

Object是JS中所有对象数据类型的基类(最顶层的类)在Object.prototype上没有__proto__这个属性。

所以原型链的终点是Object.prototype

所以最开始那张图就被我标记成下面这样了，哈哈哈！！！