多图详解，一文带你啃懂原型链，原来这么简单！

多图详解，一文带你读懂原型链

你有没有想过，为什么在 JavaScript 中，你可以访问不存在于对象本身的属性？这一切都归功于原型链。原型链是一个强大的机制，它允许对象继承其他对象的属性和方法。

本文将带你深入了解原型链，让你彻底理解它的工作原理。我们还将探索原型链在 JavaScript 中的实际应用。

原型链基础

在 JavaScript 中，每个对象都包含一个内部属性，称为原型。原型也是一个对象，它包含了一组属性和方法。当对象尝试访问一个不存在于自身的不存在的属性时，它会沿着原型链向上查找，直到找到该属性。

例如，考虑以下代码：

const person = {
  name: 'John',
};

console.log(person.age); // undefined

虽然 person 对象没有 age 属性，但它可以访问它，因为 age 属性存在于 person 的原型链中。原型链通常包含 Object.prototype，它包含所有 JavaScript 对象共享的通用方法，如 toString() 和 valueOf()。

原型链的优点

原型链提供了许多优点：

• 代码重用： 原型链允许对象继承其他对象的属性和方法，从而避免了代码重复。
• 灵活性： 原型链使你可以动态地添加或删除属性，而不必修改现有对象。
• 效率： 原型链消除了在每个对象中存储相同属性的需要，从而提高了内存效率。

原型链的局限性

尽管有这些优点，原型链也有一些局限性：

• 继承的限制： 对象只能继承一个直接原型。
• 修改原型： 修改原型可能会影响所有继承自该原型的对象。
• 性能开销： 沿着原型链查找属性可能会导致性能开销，尤其是在深度嵌套的对象中。

原型链在 JavaScript 中的应用

原型链在 JavaScript 中有广泛的应用，包括：

• 继承： 通过使用 Object.create() 或 new ，可以创建从其他对象继承属性和方法的新对象。
• 扩展： 可以通过向原型添加属性和方法来扩展现有对象。
• 混入： 可以使用 Object.assign() 或 Object.setPrototypeOf() 将属性和方法从一个对象复制到另一个对象。

结论

原型链是 JavaScript 中一个强大的机制，它允许对象继承其他对象的属性和方法。虽然它提供了许多优点，但也要注意它的局限性。通过理解原型链，你可以更有效地利用 JavaScript，并编写更健壮、更灵活的代码。