javascript - 如何理解JS原型和原型链_个人文章

来源：恒创科技编辑：恒创科技编辑部

2024-01-29 03:21:59

每个函数（箭头函数除外）都有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

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

函数也是对象看到x.__proto__时，就要把x看成对象（哪怕它是个函数），继而想到“对象的__proto__指向其构造函数的原型”看到x.prototype时，就要想到x肯定是个函数，x.prototype作为一个整体表示函数x的原型，其实就是个对象

本文地址：https://www.henghost.com/jishu/19981/