简单一张图看懂最关键的原型链指向

用脑图画的一张指向说明图，后面会对图中的指向关系做一个说明，并且会通过代码进行校验。

image.png

分解说明

1、函数a有一个prototype指向a的原型对象，原型对象中会有一个constructor属性指向a函数本身。
2、通过new关键字对a函数进行实例化一个b对象，在b对象中会有一个__proto__属性指向实例化b对象的构造函数的prototype原型对象。然后prototype就能找到a函数。从而建立了一条b对象查找到a构造函数的路径，这个关系路径就是原型链。

代码校验

在下面的代码中，我们针对上图的关系指向，进行了打印，看输出结果来进行校验。

// 定义了一个函数a     
function a () {
    this.id = 1
}
// 打印a函数
console.log(a)
// 打印a函数的原型对象
console.log(a.prototype)
// 打印a函数的原型对象的constructor是否为a函数本身
console.log(a.prototype.constructor === a)

console.log('------------- 分割线 -------------')

// 对a函数实例化一个b对象
var b = new a ()
b.name = '张三'

// 打印b对象
console.log(b)
// 打印b对象的__proto__指向
console.log(b.__proto__)
// 打印b对象的__proto__ 是否为 a函数的原型对象
console.log(b.__proto__ === a.prototype)

代码的运行结果

image.png

在上面的代码中已经使用原型链实现了一个继承，对象b中没有定义id属性，但是打印出来的结果中，可以看到b对象除了有自己的name属性之外还有一个id出现，那么这个id属性是怎么来的呢？ 它就是通过上面我们说到的这个原型链指向关系然后在a构造函数中继承过来的。

转载请说明出处.谢谢！