关于原型链的理解

JS初学者会遇到的三大难题：闭包，原型，继承。今天我来讲讲我对原型的理解，如果哪里有错误的地方，还请大家指正

首先是关于prototype

我们每创建一个函数，它都会包括一个prototype属性。这个属性是一个指针，指向一个对象

1 2	function foo(){} typeof foo.prototype // "object"

那么这个对象里面有什么呢？

可以看到里面有一个constructor属性和一个__proto__属性。而且constructor指向了foo

那么为什么每次创建函数的时候都会有这个属性呢？看下面这个例子

那么问题来了，儿子哪来的钱呢？原来是父亲的钱。可是父亲的钱为什么可以算到儿子头上呢？是不是可以理解为父亲的prototype里的属性都会被儿子继承。

对了这就是prototype的作用，每个通过构造器构造出来的实例都可以拥有prototype里的属性（实例就是通过构造器构造出来的对象，比如儿子就是父亲的实例）

那么儿子为什么可以拿到父亲的钱呢？换句话说，父亲为什么会把钱给儿子呢。现实中你可能会说了，因为血缘关系。

同样在js里也有血缘关系，那就是[[Prototype]]

关于[[Prototype]]和属性查找

儿子并没有钱，通过血缘关系获得了父亲的钱，这就是属性查找。

在js里就是，引擎在son函数里查找有没有money这个属性，如果这个函数没有这个属性，会顺着血缘关系查找上一级，也就是father函数，如果有money属性，就返回这个属性的值，如果没有，会继续向上一级查找，直到查找到顶级对象，如果还没有，就会返回undefined。这就是原型链。就好像问儿子，有车吗？没有。然后儿子去问父亲，父亲也没用，再去上一级问。。如果全家都没有

1	son.car // undefined

我们多次提到血缘关系，前面也说过在js里是[[Prototype]]。但是这个属性是js内置的属性，并不能让我们使用。所以在chrome和firefox里提供了__proto__来表示血缘关系。后面我们都使用__proto__来代替[[Prototype]]。但是一定要注意在开发的时候不能使用__proto__。

来继续看

奇怪的是son.__proto__并不指向father。而是指向一个对象，这个对象的constructor指向father函数。

通过前面的了解，这个对象不就是father.prototype吗。我们验证一下

1	son.__proto__ === father.prototype // true

是不是觉得原型关系快要浮出水面了

属性查找就是顺着__proto__查找，__proto__链就是原型链

那么js为什么要设计一个不能在开发中使用的内置proto

在正常的面向对象的语言里，一个类所实例化的对象，里面都会有这个类所有属性的复制。

但是js没有类啊，怎么实现关联呢。所以就有了__proto__

回头看一下，好像还有一个属性还没有讲

关于constructor

注意这个属性并不是表示由谁构造。或者说并不能准确的表示。我们来看

son.constructor === father // true
// 父亲改嫁了（重写原型对象）
father.prototype = {money: 300}
// 又生了一个女儿
var daughter = new father();
daughter.constructor === father // false
daughter.constructor === Object // true
// 这就有点奇妙了

为什么会造成这种情况呢

其实constructor准备的说是指向引用对象关联的函数

因为实例其实并没有constructor属性，这个属性是委托在实例的__proto__对象上。所以把一个新的对象赋值给father之后，新的实例的constructor其实通过__proto__指向了新的对象{monet: 300}的constructor。这个对象是通过字面量的方式创建的，所以他的constructor是指向Object的

上面都懂了的话，我要放大招了

原型链完全图解，图片来自谷歌

不要慌。。一点一点来看

首先f2和f1是由Foo构造出来的，所以它们的__proto__指向Foo.prototype，而Foo.prototype是一个对象，所以它的__proto__指向顶级对象Object.prototype

o1和o2是对象字面量构造出来的，相当于new Object。所以它们的__proto__直接指向Object.prototype

那为什么Foo的__proto__指向Function.prototype呢？

因为Function是一个顶级构造器，而Foo函数相当于new Function构造出来的。也就是在js里，所有的函数，它们的__proto__都是指向Function.prototype（包括它自己和Object）。而Function.prototype又指向Object.prototype。

所以原型链的顶端，也就是顶级对象是Object.prototype，它是Object的实例，而Object本身是一个构造器

九九归一…

应该就是这么多了，欢迎指正

2017-03-28