相信大家对“原型链”的概念肯定不陌生,它也是初学者的噩梦。为什么是噩梦呢,我认为原因有3点:
-
最权威的官方文档(MDN)讲的就比较模糊。
-
“原型链”的应用极少。
-
大环境很卷,面试的时候,很多 1+1 = 2 的事情,非要说成不仅等于2,还有可能等于其他东西,这样才能体现出你或者对方的价值。
那么针对这个知识点,官方文档出手了。我们接着往下阅读
一、原型与原型链
上面是官方文档的描述,总结如下:
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里有一段对“设置原型”的描述是这样的:
它说所有的函数都有一个prototype属性,其实这样的描述是不准确的,箭头函数就没有prototype属性。
所以呢,这就出现了一个面试题:可以new一个箭头函数吗?
答案是不行的。MDN里明确表示new操作符做了4件事:
因为箭头函数没有prototype属性,所以到第二步的时候会报错。
四、最后
好啦,本期文章到这里就结束啦,如果我写的对你有帮助,希望客官不要吝啬自己的小心心,我们下期再见啦~~