Javascript 对原型链的理解文章

最近在解读React源码的时候，在读到以下代码的时候

Component.prototype.setState = function (partialState, callback) {

  ...

};

var pureComponentPrototype = PureComponent.prototype = new ComponentDummy();

pureComponentPrototype.constructor = PureComponent;

发现对于js对象中的原型理解不够深入的话，无法继续往下读源码。以前对于这一块似懂非懂，由于工作中运用得很少就把它放到一旁。现在为了能完全理解React源码，就重新复习了下，做到了理解以后再把脑海中的知识写下来加深印象，如果接下来的话哪里不对，请大家指出，我会及时改正，愿大家在学习的路上越挫越勇。

首先，我们用到常常用到的一句话，世界万物皆对象。所以在Javascript中,每一个函数实际上都是一个函数对象。

我之所以先提这么一句，是因为函数(Function)和对象(Object)是我们理解原型绕不过的坎，为了怕读者混淆，函数我们会统一称呼为函数对象，对象即对象。

我们先聊构成，再聊实际作用。

首先，每一个函数对象都有一个prototype属性，该属性指向原型对象，且原型对象会自动生成一个名叫constructor属性。

然后，每一个对象都有一个[[prototype]]对象，这是JS的一个官方非标准定义，在浏览器中或者各种调试台中，我们可以看到的实际体现是  someObject.__proto__，这是因为浏览器对该属性的一种实现，如果浏览器无法打印该属性只能说明该浏览器对这个属性没有做兼容，你可以理解为 someObject.[[prototype]] === someObject.__proto__。

我创建并打印一个example函数对象，他的构造如下：

函数对象构造

我们可以清楚的看到该函数对象包含prototype属性，该属性中含有constructor属性，也有chrome浏览器对[[prototype]]属性的实现，即__proto__属性。而prototype中也包含__proto__属性，每一个对象都有一个[[prototype]]对象。

而既然每个对象都有这个属性且浏览器大费周章实现这个属性，这个对象指向哪里呢？

该对象指向该对象的构造函数的原型对象，这句话有点绕，我们来分析一下。

首先，那么怎么来理解构造对象，构造函数就是你创建新对象所使用的磨具，如下图：

构造函数

在这里，Mike对象是我们使用Person函数为磨具构造出来的，那Person函数就是Mike对象的构造函数。

那么根据我们上面的话，那么就能得出如下的公式，即

Mike.__proto__ === Person.prototype

那么又有人会问，我知道了__proto__的指向，那么prototype又该向哪里呢？

先简单的回答下，该属性指向原型对象。

回归正题，什么是原型链，且为什么要有原型对象？

我们来看如下的例子：

理解原型对象

首先，我们使用Person构造函数创建了Mike和John对象，并为他们赋值，我们可以发现，不管是name属性，age属性还是array属性他们都是独自储存，说明它们虽然都拷贝了构造函数的静态属性，但是他们是分别储存，那么对于属性还好，那么如果我想和其他同一个构造函数出来的对象共用一个方法，或者继承一个方法该咋办呢？

原型属性

那么我们就为Person对象函数的原型上添加一个share属性，让其指向一个数组。

由于是在原型链上添加了该属性，那么当我们去使用Mike.share时，js会去寻找Mike身上存不存在share对象，如果Mike上不存在，那么就会去Mike的__proto__上找（我们知道对象的[[prototype]]指向了构造函数的原型对象），然后就会在Person的prototype属性身上找到该属性（如果构造对象身上找不到该属性，就会继续往上找，直到Object.prototype，如果Object身上没有该方法，就会报错）。我们现在发现，我们使两个实例对象都共用了某一个属性或者某一个方法。所以，我们会说静态方法，实例方法等等是实现了对象的多态，而原型对象实现了代码的继承。

好了，我继续挖React源码了，goodbye~