一图理解javascript 原型链

同学们学习js的过程中，在理解原型链时，是否陷入原型链复杂的关系网，觉得晦涩难懂。跟着作者理顺原型链关系，让你一眼了解原型链关系。

理解原型链概念对学习es6语法中的类（Class）有很强的帮助。

这里就不浪费大家的事件，写原型链的官方解释了，如有需要可以百度。先给大家放张图片，也可以看作者的头像，随后跟着我一起理清思路，掌握原型链。

1.构造函数

简单理解构造函数就是创建对象的函数。图中Star就是一个构造函数。使用new关键字，new 构造函数出来的对象就是该构造函数的实例（  zgr = new Star()  ）,图中zgr对象就是构造函数Star的实例 。

//构造函数
function Star (name,age){
    this.name = name；
    this.age = age；
}
var zgr = new Star('张国荣', 19)；
console.log(zgr.__proto__ == Star.prototype) //true
console.log(zgr.__proto__.__proto__ == Object.prototype)  //true  Star的原型对象是Object的实例
console.log(Star.__proto__ == Function.prototype)  //true Star是Function的实例

这里要先知道  Star.prototype  和  zgr.__proto__  是什么。

结合第一张图分析代码。

        通过这段代码的第7行代码可以看出，他们是一个东西，用专业一点的话来说，是Star的原型对象，本质就是一个对象。只不过是通过两种方式找到的，前者通过构造函数Star的显式原型链找到，后者通过Star的实例zgr这个对象的隐式原型链找到。

        理解第8行代码前要牢记一点，任何对象的原型对象就是Object的实例，除了Object自己的原型对象。可以简单点理解：把Star的原型对象看作a对象，a就是Object的实例。但是Object的原型对象却是null。

看到这儿是否有点理解原型链了，别着急，还差最后重要的一步了。

        构造函数Star  

        zgr对象是Star的实例

        Star的原型对象（ Star.prototype  或者 zgr.__proto__ ）是Object的实例。

看代码第8行，不就表示的是：Star的原型对象是Object的实例。

现在不就把各对象连起来了，最终形成了原型链。

        Star的实例是zgr，zgr.__proto__是Object的实例（假如这个实例对象为a），a.__proto__就是Object的原型对象（假如这个对象为b），b.__proto__就是Null。

        最终形成了这种链状的关系，也就是原型链。而这种关系的形成就是你创建构造函数Star和new Star的时候就自动建立了。（题外话：当然也可以手动建立这种关系，这就涉及到es6里面的类的概念，或者是es6之前一些手段来实现）。

        存在这种原型链关系的好处就是，从null开始一直到zgr这个实例结束，处于靠后的对象能使用靠前的对象上面的方法和属性。具体就是zgr这个对象能使用a和b这两个对象的方法和属性；a能使用b对象的方法和属性。（es6类中的继承就是这钟关系，只不过实现的代码不一样而已）。

以上就是我们会经常用到的原型链概念。

接下来我们看一下图左上角这一团复杂化关系（不必过多去纠结这一部分的内容，能理解清楚那就最好）。

首先要知道一个概念，任何函数都是Function的实例。（或许用另一种方式创建Star构造函数能让你看清）。但不建议使用这种方式。

Function 、自己写的构造函数、Object、Array等都是Function的实例。

var Star = new Function('name', 'age', 'this.name = name; this.age = age')

现在再看这张图的关系网就比较简单了。 可以简单理解Array、Object和Star一样是构造函数，是Function的实例，再顺着上面的思路就能理清楚了，这些构造函数都有各自的原型对象，不要混淆为一个原型对象了。