JavaScript进阶教程：揭秘继承的神奇世界

2024-02-19 12:56:30

JavaScript 中的继承：揭示复杂世界的奥秘

在 JavaScript 中，继承就像魔法一样，它允许你从现有的类中创建新类，而不用重复编写代码。通过继承，你可以构建复杂的程序，这些程序具有共享的功能和属性。了解 JavaScript 中的继承方法将为你打开一个构建强大且可扩展应用程序的世界。

原型继承：一个简单的起点

原型继承是 JavaScript 中最基本的继承方法。它使用原型的概念，原型是一个包含对象属性和方法的对象。通过将一个对象的原型设置为另一个对象的原型，你可以创建一个新对象，该对象继承了第一个对象的属性和方法。

举个例子：

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

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

function Student(name, major) {
  Person.call(this, name);
  this.major = major;
}

Student.prototype = Object.create(Person.prototype);

const student = new Student("John", "Computer Science");

student.greet(); // 输出：Hello, my name is John.

在这个例子中，Student 类从 Person 类继承。当我们创建 student 对象时，它将继承 Person 类的 name 属性和 greet() 方法。同时，Student 类还添加了一个额外的 major 属性。

组合继承：更灵活的选择

组合继承是另一种继承方法，它结合了构造函数和原型对象。它允许你从多个父类继承属性和方法，这在原型继承中是不可能的。

来看一个例子：

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

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

function Student(name, major) {
  Person.call(this, name);
  this.major = major;
}

Student.prototype = new Person();
Student.prototype.constructor = Student;

const student = new Student("John", "Computer Science");

student.greet(); // 输出：Hello, my name is John.

在这个例子中，我们首先调用 Person.call(this, name) 来确保 Student 类可以访问 Person 类的属性和方法。然后，我们创建一个 Person 类的实例，并将其赋值给 Student 类的原型。最后，我们使用 Student.prototype.constructor = Student; 来确保 Student 类的实例的 constructor 属性指向 Student 类。

ES6 继承：现代而简洁

ES6 引入了新的继承语法，使得继承更加简单和直接。它使用 extends 来指定父类。

举个例子：

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

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

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

const student = new Student("John", "Computer Science");

student.greet(); // 输出：Hello, my name is John.