关于前端:如何理解JS原型和原型链

8次阅读

共计 1181 个字符，预计需要花费 3 分钟才能阅读完成。

每个函数（箭头函数除外）都有 prototype 属性，该属性指向原型。
每个对象（null 除外）都有__proto__属性，指向了创立了该对象的构造函数的原型。（注：函数也是对象）
对象能够通过__proto__来寻找不属于该对象的属性，__proto__将对象连接起来组成了原型链。

了解原型和原型链，上面这张图很重要：

依据下面这张图，可能失去如下等式：


// 一、对象的__proto__指向其构造函数的原型
f1.__proto__ === Foo.prototype

// 二、对象的__proto__指向其构造函数的原型
f2.__proto__ === Foo.prototype

// 三、Foo.prototype 实质是一个对象，其构造函数是 Object
Foo.prototype.__proto__ === Object.prototype

// 四、Foo 是一般函数（函数也是对象，所以有__proto__属性），其构造函数是 Function
Foo.__proto__ === Function.prototype

// 五、这一条比拟非凡，也很正当。Funcion 既是对象又是函数（而且不是一般函数，是所有一般函数的构造函数）。// 因为是对象，所以有__proto__属性，指向其构造函数（本人）的原型。Function.__proto__ === Function.prototype

// 六、同三
Function.prototype.__proto__ === Object.prototype

// 七、Object 是所有对象的构造函数，是一个函数，函数的构造函数是 Function
Object.__proto__ === Function.prototype

// 八、所有对象顺着原型链最终都会找到 Object.prototype，而 Object.prototype.__proto__ = null 即是原型链的起点
Object.prototype.__proto__ === null

下面的等式都分明了之后，上面这些等式应该也可能推导进去了：

Object.__proto__.__proto__ === Object.prototype
Object.__proto__.__proto__.__proto__ === null
Function.__proto__.__proto__ === Object.prototype
Function.__proto__.__proto__.__proto__ === null

其实在做推导时，抓住几个要害，就不容易被绕晕掉了：