深入浅出：JavaScript 中的继承与原型链

2023-11-21 09:28:12

继承与原型链：JavaScript 中的独特结构

在 JavaScript 的世界中，继承的概念与其他面向对象语言略有不同。这里只存在一种结构：对象。每个对象都拥有一个私有属性 proto，指向它的构造函数的原型对象 prototype。而这个原型对象又可能指向另一个对象的 proto，以此类推，形成了一条连接的对象链，称为原型链。

原型对象：共享属性和方法的蓝图

原型对象是每个构造函数固有的一部分，它充当着一种蓝图，为该构造函数创建的所有实例对象提供共享的属性和方法。当实例对象访问一个不存在的属性或方法时，JavaScript 就会沿着原型链向上搜索，直到找到该属性或方法为止。

修改原型对象：影响所有实例

修改原型对象的影响十分显著。它会影响到所有基于该构造函数创建的实例对象。这意味着可以通过更改原型对象来动态添加或删除属性和方法，从而为所有实例对象提供新的功能或行为。

示例：通过原型链实现继承

为了理解继承在 JavaScript 中的实际应用，让我们考虑一个示例。假设我们有一个 Person 构造函数，用于创建人员对象。我们希望创建另一个 Student 构造函数，继承 Person 构造函数的属性和方法，同时添加额外的属性和方法。

// Person 构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// Person 原型对象
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
};

// Student 构造函数
function Student(name, age, major) {
  // 通过调用 Person 构造函数实现继承
  Person.call(this, name, age);

  this.major = major;
}

// 将 Student 原型对象指向 Person 原型对象
Student.prototype = Object.create(Person.prototype);

// 在 Student 原型对象中添加新方法
Student.prototype.study = function() {
  console.log(`${this.name} is studying ${this.major}.`);
};

// 创建 Student 实例对象
const student = new Student('John', 20, 'Computer Science');

// 访问继承自 Person 的属性和方法
student.greet(); // 输出：Hello, my name is John and I'm 20 years old.

// 访问新增属性和方法
student.study(); // 输出：John is studying Computer Science.