图解JavaScript中的原型链

引言[1]：

遵循ECMAScript标准，someObject.[[Prototype]] 符号是用于指向 someObject的原型。从 ECMAScript 6 开始，[[Prototype]] 可以通过 Object.getPrototypeOf() 和 Object.setPrototypeOf() 访问器来访问。这个等同于 JavaScript 的非标准但许多浏览器实现的属性 __proto__。

但它不应该与构造函数 func 的 prototype 属性相混淆。被构造函数创建的实例对象的 [[prototype]] 指向 func 的 prototype 属性。Object.prototype 属性表示 Object的原型对象。

一图胜千言：

注：图中还少画了，那就是原型对象的[[prototype]]都是指向Object.prototype。

总结起来：

1）构造函数在创建的过程中，系统会自动创建与构造函数相关联的一个空的对象（图中的构造函数原型对象），可以由构造函数.prototype来访问到

2）原型对象的constructor属性指向这个原型对象所对应的构造函数

3）每个对象的__proto__属性指向其构造函数的prototype属性

4）一切对象都继承自Object.prototype，一切函数对象都继承自Function.prototype(且Function.prototype会最终继承自Object.prototype）

5）Function的原型链为 Function→ Function.prototype → Object.prototype → null ，Object的原型链为 Object → Function.prototype → Object.prototype → null

例子:

class Person{
    constructor(name){
        this.name = name
    }
}

p = new Person("John")

console.log(p.__proto__ === p.constructor.prototype)  // true
console.log(p.constructor.prototype.constructor === Person)  // true
console.log(p.constructor.prototype.__proto__ === Object.prototype)  // true
console.log(p.constructor.prototype.constructor.__proto__ === Function.prototype)  // true
console.log(Function.prototype === Function.__proto__)  // true
console.log(Function.__proto__ .__proto__=== Object.prototype)  // true

参考：

[1] https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

[2] https://juejin.im/post/5b3dd222e51d4519226f204d