学过前端的小伙伴肯定都知道“原型”、“原型链”这些概念,也正如标题所言,它曾经是每个初学者的大山,特点如下:
- 网上的解释太多且各不一样,导致概念难懂。
- MDN里的官方解释,自己又看不下去,大部分一扫而过,导致看与不看,效果一样。
- 牵扯的知识点琐碎且精细,加上工作中又不常用(甚至不用),导致对这个知识点总是模模糊糊。
作为曾经被迫害的一份子,我觉得有必要将这个知识点记录下来,给想要入门的前端小白,搭建一个比较清晰的思路,我们直接进入正题吧。
在此之前,我们今天讨论的内容,只针对引用数据类型。
你将收获
- 理解什么是原型?
- 理解什么是原型链?
- 如何设置原型?
- 如何区分属性是对象自有的,还是原型链上的?
- 对象、原型、构造函数、constructor之间的关系?
什么是原型?
JavaScript中所有的对象都有一个内置的对象,这个内置的对象就叫做“原型”。特别注意,在JavaScript中,只有 null、undefined 没有原型对象
。
如何访问原型对象呢?这个是要做出区分的,具体如下:
动手实践一下:
function Person(name){
this.name = name;
}
let p1 = {};
console.log('p1对象的原型对象:', p1.__proto__);
let p2 = new Person();
console.log('p2对象的原型对象:', p2.__proto__);
console.log('名字为Person的构造函数对应的原型对象:', Person.prototype);
原型链的定义
原型对象里也有原型,一直向上查找,直到为null。这一整条链路就叫做“原型链”。
如何遍历对象上的所有原型对象?我们以Date为例:
let date = new Date();
do {
date = Object.getPrototypeOf(date);
console.log('date:', date);
}while(date);
如何设置原型对象?
这个方式就有很多,如下:
- 如果你想给函数设置原型,那么你可以选择直接操纵 prototype属性。
- 如果你想给字面量对象设置原型,那么你可以选择直接操纵 ._proto_ 属性。
- 你也可以选择通过
Object.create(a)
方法来创建一个新对象b,这样b的原型对象就是a。 - 你也可以选择new一个对象,那么这个
实例对象的原型
就是构造函数的原型对象
。
如何区分属性是原型链上的还是自有的?
针对 对象属性来说
,它的属性类型(string类型、还是symbol类型)、以及是否可被遍历 对于我们来说是很重要的。
获取对象属性的方式有很多,整理如下:
方法 | 说明 |
---|---|
Object.keys | 返回自身可遍历的字符串属性。 |
Object.getOwnPropertyNames | 返回自身的字符串属性(无论是否可被遍历)。 |
Object.getOwnPropertySymbols | 返回自身的symbol属性(无论是否可被遍历)。 |
Object.hasOwnProperty | 此方法用于判断属性是否是对象自有的。 |
Reflect.ownKeys | 这个API是最强大的,它可以返回对象自身的所有属性(无论是什么类型,无论是否可遍历) |
for … in … | 遍历 自身以及原型链上 可被遍历的字符串属性 。 |
相信有了上面的这张表,如何判断一个属性是否在原型链上,对你而言已不在话下。
对象、原型、构造函数、constructor之间的关系?
来用一张图收尾:
最后
好啦,本期的内容就分享到这里,如果上述过程中,有内容错误,请在评论区里指正,如果我的内容对您有帮助,还请给个5星好评,我们下期再见啦~~