likes
comments
collection
share

如何理解JS原型和原型链

作者站长头像
站长
· 阅读数 121
  1. 每个函数(箭头函数除外)都有prototype属性,该属性指向原型。
  2. 每个对象(null除外)都有__proto__属性,指向了创建了该对象的构造函数的原型。(注:函数也是对象)
  3. 对象可以通过__proto__来寻找不属于该对象的属性,__proto__将对象连接起来组成了原型链。

理解原型和原型链,下面这张图很重要:如何理解JS原型和原型链

根据上面这张图,能够得到如下等式:


// 一、对象的__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

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

  1. 函数也是对象
  2. 看到x.__proto__时,就要把x看成对象(哪怕它是个函数),继而想到“对象的__proto__指向其构造函数的原型”
  3. 看到x.prototype时,就要想到x肯定是个函数,x.prototype作为一个整体表示函数x的原型,其实就是个对象
转载自:https://segmentfault.com/a/1190000042519546
评论
请登录