从实例视角理解 JS 之原型链

实例与构造函数：原型链的基础

在 JavaScript 中，每个对象都与一个构造函数相关联，该构造函数用于创建该对象。构造函数负责定义对象的属性和方法。每个构造函数都有一个与之关联的 prototype 属性，它是一个指向另一个对象的指针。这个对象通常被称为构造函数的“原型”。

当使用 new 运算符创建对象时，JavaScript 会创建一个新对象，并将该对象的 proto 属性设置为构造函数的 prototype 属性指向的对象。这表示该对象可以访问构造函数原型中定义的所有属性和方法。

原型链的工作原理

当对象尝试访问一个属性或方法时，JavaScript 会首先在其自身中查找。如果找不到，它将沿着原型链向上查找，直到找到该属性或方法，或者到达原型链的末尾（通常是 Object.prototype）。

例如，如果我们有一个 Person 构造函数，它定义了 name 和 age 属性，我们可以创建一个 Person 实例并访问其 name 属性：

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const p = new Person('John Doe', 30);

console.log(p.name); // "John Doe"

在此示例中，p 实例尝试访问其 name 属性。JavaScript 在 p 中找不到 name 属性，因此沿着原型链向上查找。它在 Person.prototype 中找到了 name 属性，并将其值返回给 p。

修改原型链

值得注意的是，原型链是动态的。这意味着我们可以通过修改构造函数的 prototype 属性来修改原型链。例如，我们可以向 Person.prototype 添加一个新方法：

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

现在，我们可以使用 Person 实例调用 greet 方法：

p.greet(); // "Hello, my name is John Doe"

通过修改原型链，我们可以向现有对象添加新功能，而无需修改其构造函数或代码中其他使用该构造函数的地方。

原型链的优点

原型链为 JavaScript 提供了以下优点：

• 代码重用： 原型链允许我们在多个对象之间共享属性和方法，从而提高代码重用性。
• 灵活性和可扩展性： 原型链允许我们在不修改现有代码的情况下动态修改对象行为。
• 内存优化： 原型链有助于减少内存消耗，因为共享属性和方法仅存储一次。

结论

原型链是 JavaScript 中一个强大的概念，它允许对象共享属性和方法。通过了解原型链的工作原理，我们可以编写出更简洁、更可重用且更可扩展的代码。