JavaScript两张图搞懂原型链

前言：

在上一篇文章中，我们介绍了JavaScript原型概念。之所以未将原型链一并讲解，是因为原型链机制较为复杂，且属于面试高频考点，因此单独展开学习。

1.原型的关系

在JavaScript中的每个函数都会有一个prototype属性，这个属性又会返回一个原型，原型又有一个constructor属性，这个属性指向与之关联的构造函数。通过构造函数实例化的对象会有一个__proto__属性，这个__proto__属性指向与构造函数的prototype指向的是同一内存。

需要注意的是，__proto__属性已在标准中被移除，目前推荐使用Object.getPrototypeOf(object)和Object.setPrototypeOf(object, prototype)来替代操作。

接下来通过测试Object构造函数与原型的关系来验证上述理论，示例代码如下：

// 首先 Object 是一个构造函数，就会有 prototype 属性
var result = Object.prototype
console.log(result) // 得到一个原型对象
/*
 * 原型对象的 constructor 属性 -> 返回与之关联的构造函数
 * Object.getPrototypeOf(result) 返回指向构造函数的 prototype
 */
var result2 = result.constructor
console.log(result2) // [Function: Object]
var result3 = Object.getPrototypeOf(result)
console.log(result3) // null

对应的关系图解如下：

当我们使用Object.getPrototypeOf(Object.prototype)获取Object.prototype的原型时，返回值为null。这表明当查找至Object.prototype时，即可停止查找过程。

2.原型链

为了更直观地理解原型链的概念，我们先观察以下代码段：

function Person(name) {
  this.name = name
}

var PP = Person.prototype
var PPC = PP.constructor
// 验证与构造函数是否相同
console.log(PPC === Person) // true

// 实例化 Person
var person = new Person('一碗周')
// 获取 Person 实例化后的对象的原型
var pP = Object.getPrototypeOf(person)
// 验证 Person 实例化后的对象的原型是否指向构造函数的 prototype
console.log(pP === PP) // true

事实上，所有构造函数默认都继承自Object。可以通过以下代码进行验证：

// 获取 Person.prototype 的原型
var PPP = Object.getPrototypeOf(PP)
var OP = Object.prototype
// 判断两者是否相等
console.log(PPP === OP) // true

上述代码的逻辑可能不够直观，因此绘制了一张示意图辅助理解：

图中红色线条所示部分即为原型链。原型链本质上是原型对象间关系的指向路径，直到最终结果为null，即Object.prototype时，原型链终止。这意味着**Object.prototype**是原型链中的终点。

我们可以利用Object.setPrototypeOf(obj, prototype)方法来手动设置具体内容的原型链，但除非必要，否则不建议这样做，因为这种操作会显著消耗性能。

3.结语

本文通过两张图解，清晰展示了JavaScript中原型的关系及原型链的定义，并明确了原型链的终点所在。

至此，关于JavaScript原型链的讲解结束。如需了解更多相关内容，请搜索本站往期文章或继续浏览后续文章，感谢大家的支持！