从面向对象到原型继承：探秘JavaScript中的继承奥秘

2023-08-15 11:03:28

JavaScript 继承：掌握面向对象编程的核心

在面向对象编程（OOP）的世界里，继承是重中之重。它使我们可以创建新的对象，同时继承自现有对象的功能和属性。在 JavaScript 中，继承机制独树一帜，既有传统的原型继承，也有 ES6 引入的 class 继承。让我们深入探讨 JavaScript 继承的奥秘，解锁面向对象编程的精髓。

原型继承：JavaScript 继承的基石

想象一下一个家族树，每个人都从祖先那里继承了特质。在 JavaScript 中，每个对象都有一个原型对象，充当其祖先。原型对象包含对象可以访问的属性和方法。当对象尝试访问不存在的属性时，JavaScript 就会沿着原型链向上查找，直到找到它为止。

原型继承的强大之处在于其灵活性。它允许我们创建复杂且动态的继承关系，其中一个对象可以继承来自多个祖先的特质。例如，我们可以创建一个 Student 对象，它同时继承了 Person 和 EnrolledStudent 对象的属性。

class 继承：传统 OOP 的回声

ES6 引入了 class ，使 JavaScript 的继承方式更接近传统 OOP 语言。class 继承使用类定义来创建对象，并使用 extends 关键字指定继承关系。class 定义对象属性、方法和构造函数。

class 继承的一个主要优势在于其简洁性。与原型继承相比，它提供了一种更直观的方式来定义继承关系。然而，它在灵活性方面略逊一筹，因为它只支持单继承。

原型继承与 class 继承：孰优孰劣？

选择合适的继承方法取决于你的具体需求。原型继承更灵活，允许创建更复杂的继承关系，而 class 继承更简洁，更接近传统 OOP 语言。

特征	原型继承	class 继承
语法	更灵活	更简洁
性能	更快	略慢
适用场景	复杂继承关系	简单继承关系

代码示例

原型继承

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

const student = Object.create(person);
student.studentId = 12345;

console.log(student.name); // John Doe
console.log(student.studentId); // 12345

class 继承

class Person {
  constructor(name) {
    this.name = name;
  }
}

class Student extends Person {
  constructor(name, studentId) {
    super(name);
    this.studentId = studentId;
  }
}

const student = new Student('John Doe', 12345);

console.log(student.name); // John Doe
console.log(student.studentId); // 12345