MDN终于把原型链说明白了

275 阅读2分钟

相信大家对“原型链”的概念肯定不陌生,它也是初学者的噩梦。为什么是噩梦呢,我认为原因有3点:

  • 最权威的官方文档(MDN)讲的就比较模糊。

  • “原型链”的应用极少。

  • 大环境很卷,面试的时候,很多 1+1 = 2 的事情,非要说成不仅等于2,还有可能等于其他东西,这样才能体现出你或者对方的价值。

那么针对这个知识点,官方文档出手了。我们接着往下阅读

一、原型与原型链

截屏2023-08-06 10.50.28.png

上面是官方文档的描述,总结如下:

1、如果你想访问 {} 的原型属性,你可以通过{}.__proto__ 或者 Object.getPrototypeOf({}) 来达到目的。
2、原型与原型之间构成原型链。

二、设置原型

因为我们得到的新目标总是对象({}),但是父级又不总是对象({}),因此出现了2种设置原型的方法。

第一种,父级是对象,此时我们需要将新对象的__proto__属性设置为父级对象,或者设置为父级对象的原型属性

第二种,父级是函数,此时我们需要将新对象的__proto__属性设置为父级的prototype属性。这点我们也可以通过new操作符来验证结论的正确性。

2.1、如果父级是对象

let father = {
    age: 35,
    name: '刘'
}

let children = {}

children.__proto__ = father;

console.log(children.name);

2.2、如果父级是函数

function Person(){}

let chidren = new Person();

console.log(children.__proto__ === Person.prototype) // true;

三、给MDN纠错

MDN里有一段对“设置原型”的描述是这样的:

截屏2023-08-06 11.46.35.png

它说所有的函数都有一个prototype属性,其实这样的描述是不准确的,箭头函数就没有prototype属性

截屏2023-08-06 11.50.17.png

所以呢,这就出现了一个面试题:可以new一个箭头函数吗?

答案是不行的。MDN里明确表示new操作符做了4件事:

截屏2023-08-06 12.01.26.png

因为箭头函数没有prototype属性,所以到第二步的时候会报错。

四、最后

好啦,本期文章到这里就结束啦,如果我写的对你有帮助,希望客官不要吝啬自己的小心心,我们下期再见啦~~