忆、悟 JS 原型链，一图打破所有疑惑！
2023-10-07 06:05:50
JavaScript 中的原型链：深入浅出的全面指南
理解原型链
想象一下一个队列，其中每个对象都站成一列，后面跟着它的原型对象。这个队列就构成了原型链。原型链本质上是一个指向对象及其原型对象之间的关系链。
每个对象都有一个内部属性 [[Prototype]]，它指向其原型对象。如果没有这个属性或其值为 null，则表示该对象没有原型。
原型的作用
原型对象的目的是为其实例对象提供共享属性和方法。这消除了代码重复，允许您轻松地向所有同类型对象添加新功能。
创建原型链
有几种方法可以创建原型链：
- 对象字面量： 原型链的根对象通常是
Object.prototype。 - 构造函数： 构造函数的
prototype属性指向其原型对象。 Object.create()方法： 此方法创建一个新对象，其原型链指向提供的对象。
一图胜千言：浅显易懂的原型链示意图
为了进一步理解原型链，让我们来看一个简化的图表：
┌────────┐
│ Object │
└────────┘
↑
/ \
┌──────┴──────┐
│ Array │ Date │
└──────┬──────┘
↑ ↑
/ \
┌───────┴───────┐
│ Number │ String │
└───────┬───────┘
↑ ↑
/ \
┌──────────┴──────────┐
│ MyObject1 │ MyObject2 │
└──────────┬──────────┘
在这个图中：
Object是原型链的根对象。Array、Date、Number和String是从Object继承的内置对象。MyObject1和MyObject2是我们创建的自定义对象，它们继承自Object。
访问原型链
您可以使用 Object.getPrototypeOf() 方法访问对象的原型对象。例如：
const obj = {};
const prototype = Object.getPrototypeOf(obj);
修改原型链
通常不建议修改原型链，因为它可能会导致意外行为。但是，如果需要，您可以使用 Object.setPrototypeOf() 方法：
const obj = {};
const newPrototype = {};
Object.setPrototypeOf(obj, newPrototype);
理解 constructor 属性
每个对象都有一个 constructor 属性，它指向创建该对象的函数。例如：
const obj = new Array();
obj.constructor === Array; // true
constructor 属性对于确定对象的类型很有用。
原型链的优点
原型链提供了许多好处，包括：
- 代码重用： 允许共享属性和方法，消除代码重复。
- 代码简洁： 消除了冗余的代码块，使代码更简洁。
- 易于维护： 轻松地向所有同类型对象添加或删除功能。
- 继承： 使对象能够继承其他对象的属性和方法。
原型链的缺点
原型链也有一些缺点：
- 性能开销： 访问属性和方法时需要遍历原型链，这可能导致性能开销。
- 修改风险： 修改原型链可能会影响所有引用该原型的对象。
- 调试困难： 追踪属性和方法的来源可能很困难。
常见问题解答
Q1：原型链和继承有什么区别？
原型链是一种实现继承的机制，它允许对象访问其原型对象中的属性和方法。
Q2：可以有多个原型链吗？
不，每个对象只有一个原型链，沿着该链向上遍历。
Q3：如何检查对象是否具有原型？
可以使用 Object.getPrototypeOf(obj) 方法，如果返回 null，则表示该对象没有原型。
Q4：我应该使用原型链还是类？
原型链和类都是实现继承的机制，但原型链更灵活，而类提供更强的类型检查。
Q5：如何打破原型链？
不能完全打破原型链，但可以通过设置对象的 [[Prototype]] 属性为 null 来阻止访问原型链。
结论
原型链是 JavaScript 中一个强大而灵活的机制，用于实现继承和代码重用。了解原型链的工作原理至关重要，以便有效地利用 JavaScript 的面向对象功能。
