【JS基础】原型对象的那些事（二）

上一篇讲了

①原型对象是什么；

②__proto__、prototype、constructor的关系；

③原型对象的做用；

④原型对象带来的一些须要注意的问题；

没理解的能够再复习一下。 传送门：JS基础—原型对象的那些事（一）

今天讲一下原型链以及原型链的关系图。

原型链是什么

每一个对象都有一个__proto__属性，指向对象的原型。

ps:准确的说，是每个实例都有一个[[Prototype]]属性，指向原型对象。这是一个隐式属性，存在可是咱们的脚本访问不到，不过浏览器厂商大部分都支持一个__proto__属性，用来显示指向原型，虽然能用，但__proto__不是ECMA中的规范。

原型的值能够是一个对象，也能够是null。若是它的值是一个对象，那么这个对象也必定有本身的原型。这样就造成了一条线性的链，咱们称之为原型链。

当咱们在对象上调用一个属性或者方法时，会先在这个对象上寻找，没有的话就去它的原型对象上找，原型对象上没有就去原型对象的原型对象上找，一直找到原型对象为null为止，没有的话就是undefined。

简而言之，对象寻找一个属性会沿着原型链向上寻找，直到原型链的顶端。

仍是以上一篇的Person为例

function Person(name) {
    this.name = name
}
Person.prototype.sayName = function() {
    console.log(this.name)
}
var person = new Person("张三")
复制代码

咱们先来画一个简单的关于原型的关系图

以上是实例、构造函数和原型对象三者的关系图。

PS: prototype只是构造函数上的一个属性，它是一个指针，指向原型对象，并不表示Person.prototype就是原型对象。这里将Person.prototype认为是原型对象，是为了方便理解，须要注意哦。

看不懂的同窗去复习上一篇的内容，看懂的咱们继续。

注意点一

原型对象也是对象，是对象就有__proto__属性，指向它的原型对象。

在上一个例子中，Person.prototype就是一个对象，这个对象能够说是原生Object构造函数的实例，因此

Person.prototype.__proto__ === Object.prototype

Object.prototype也是一个对象，因此它也有__proto__属性，不过它的__proto__指向null,也就是原型链的顶端，再往上就没有了。

从新补充一下关系图

看懂的咱们继续

注意点二

任何函数均可以说是原生Function构造函数的实例。

因此Person构造函数是Function构造函数的实例。

Person.__proto__ === Function.prototype
复制代码

继续我完善咱们的关系图

可能有人疑惑，Person不是函数吗，函数怎么也有__proto__，函数不是只有prototype吗？

由于函数本质也是对象啊，在JS的世界里，万物皆对象，因此函数有__proto__没毛病。

注意点三

Function.prototype也是对象，因此和Person.prototype同样，Function.prototype能够说是原生Object构造函数的实例，因此

Function.prototype.__proto__ === Object.prototype
复制代码

补充咱们的图（红色的线）

注意点四

Function和Object都是构造函数，根据第二点任何函数均可以说是原生Function构造函数的实例，那么

Function.__proto__ === Function.prototype
    
    Object.__proto__ === Function.prototype
复制代码

完善咱们的图（蓝色的线），大功告成。

恩，就是这么神奇，Function是Function的实例。。。

以上就是原型链的关系图，将这个图弄懂，原型对象的知识基本就掌握了。

虽然在真实场景中，这些知识用到的没这么复杂，可是掌握了最基础的知识，未来出现问题时，就能更快的找到问题的缘由。

对于新手而言，原型链和做用域链常常搞混，this和静态做用域不知道在场景中怎么使用，确实是很头疼的问题，但这也许就是js的魅力所在吧。