JavaScript六种继承方法详解

2023-10-28 04:05:13

JavaScript中有多种继承方式，包括原型链继承、借用构造函数继承、组合继承、寄生组合继承和寄生式继承。每种方式都有其特点和适用场景，理解并掌握这些继承方式对于编写出可扩展、可维护的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的原型为Person的实例
Student.prototype = new Person();

const student = new Student('John', 'Computer Science');
student.greet(); // 输出: Hello, my name is John.

在这个例子中，Student继承了Person，因此Student对象可以访问Person原型对象中的greet()方法。

借用构造函数继承

借用构造函数继承是一种简单的继承方式，它是通过调用父类的构造函数来实现的。子类的构造函数首先调用父类的构造函数，然后设置子类特有的属性和方法。

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

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

const student = new Student('John', 'Computer Science');
console.log(student.name); // 输出: John
console.log(student.major); // 输出: Computer Science

在这个例子中，Student继承了Person，因此Student对象可以访问Person原型对象中的属性和方法。

组合继承

组合继承结合了原型链继承和借用构造函数继承的优点，它可以避免原型链继承中无法访问父类私有属性和方法的问题，也可以避免借用构造函数继承中无法重用父类构造函数的问题。

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的原型为Person的实例
Student.prototype = Object.create(Person.prototype);
// 重置Student的构造函数
Student.prototype.constructor = Student;

const student = new Student('John', 'Computer Science');
student.greet(); // 输出: Hello, my name is John.

在这个例子中，Student继承了Person，因此Student对象可以访问Person原型对象中的属性和方法，同时Student对象也可以访问Person构造函数中的私有属性和方法。

寄生组合继承

寄生组合继承是组合继承的改进版本，它通过创建一个中间对象来实现继承，避免了组合继承中需要重新设置构造函数的问题。

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

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

function Student(name, major) {
  // 创建一个中间对象
  const intermediateObject = new Person(name);
  // 将intermediateObject的属性和方法复制到Student的实例中
  Object.assign(this, intermediateObject);
  // 设置Student特有的属性和方法
  this.major = major;
}

const student = new Student('John', 'Computer Science');
student.greet(); // 输出: Hello, my name is John.