JavaScript 原型：深入浅出、轻松理解！

2024-01-15 23:43:53

JavaScript 原型：理解对象共享和继承的关键

在 JavaScript 中，原型是一个强大的概念，它提供了共享属性和实现继承的能力，从而使代码更加简洁且易于维护。本文深入探讨 JavaScript 原型，包括其本质、形成方式、用途以及扩展它的方法。

1. JavaScript 原型：共享属性的蓝图

每个 JavaScript 对象都拥有一个称为 proto 的隐式原型属性，指向创建该对象的构造函数的原型。原型是一个特殊的对象，包含所有对象的共有属性和方法。当访问对象的属性或方法时，JavaScript 会首先检查对象本身，如果找不到，则会沿着原型链向上查找，直到找到该属性或方法为止。

2. 原型链的形成：建立继承关系

原型链的形成很简单。对象的 proto 属性指向其构造函数的原型，而构造函数的原型又指向其构造函数的原型，以此类推，直至到达 Object.prototype。Object.prototype 是所有对象的根原型，包含所有 JavaScript 对象的共有属性和方法。

3. 构造函数和原型的关系：创建与继承

构造函数是创建对象的函数，而原型是该构造函数的属性。使用构造函数创建对象时，该对象会继承构造函数的原型中定义的所有属性和方法。这意味着，由同一个构造函数创建的所有对象都共享同一个原型。

代码示例：

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

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

const person1 = new Person("John");
const person2 = new Person("Jane");

person1.greet(); // 输出：Hello, my name is John
person2.greet(); // 输出：Hello, my name is Jane

在上面的示例中，Person 构造函数的原型包含 greet 方法，该方法由所有 Person 对象继承。

4. 使用原型：访问和扩展共享属性

您可以通过 proto 属性访问对象的原型，或者使用 Object.getPrototypeOf() 方法。通过扩展原型，您可以向所有对象添加新属性和方法。

代码示例：

// 扩展 Object.prototype 添加一个 sayHello 方法
Object.defineProperty(Object.prototype, "sayHello", {
  value: function() {
    console.log("Hello!");
  }
});

person1.sayHello(); // 输出：Hello!
person2.sayHello(); // 输出：Hello!