一图理解原型链

[Godiswill]

一图理解原型链

原文链接

以下代码为例，看看用构造函数生成一个对象后，实例 f1 对象是如何与构造函数 Foo、Function、Object 串联起来的。

function Foo() {}
const f1 = new Foo();

注意：__proto__ 不是JS标准规范，__proto__ 是实例的属性，prototype 是构造函数的属性, constructor 是原型上的属性。

• f1 对象是构造函数 Foo 的实例，所以 f1 有 __proto__ 属性。

  f1.__proto__ === Foo.prototype

  f1.__proto__.contructor === Foo.prototype.contructor === Foo

• Foo 和 Object 虽然是构造函数，但都是 Function 构造函数的实例，所以 Foo、Object 有 __proto__ 属性。

  Foo.__proto__ === Object.__proto__ === Function.prototype

  Foo.__proto__.contructor === Object.__proto__.contructor === Function.prototype.contructor === Function

• Foo.prototype 和 Function.prototype 对象是构造函数 Object 的实例，所以都有 __proto__ 属性。

  Foo.prototype.__proto__ === Function.prototype.__proto__ === Object.prototype

  Foo.prototype.__proto__.contructor === Function.prototype.__proto__.contructor === Object.prototype.contructor === Object

• 特殊1：Object.prototype 按道理也是某构造函数的实例对象，应该是底层实现。

  Object.prototype.__proto__ === null 链路到此结束

• 特殊2：Function 按道理也是某构造函数的实例对象，指回了自己，应该是底层实现。

  Function.__proto__ === Function.prototype

  Function.__proto__.contructor === Function.prototype.contructor === Function 实现闭合。

大家多在浏览器中跑跑，加深印象理解记忆。