JavaScript里的原型链，也曾是一座大山

学过前端的小伙伴肯定都知道“原型”、“原型链”这些概念，也正如标题所言，它曾经是每个初学者的大山，特点如下：

• 网上的解释太多且各不一样，导致概念难懂。
• 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星好评，我们下期再见啦～～