JavaScript：理解独特继承的6种方式

2024-01-03 21:26:03

前言

继承是面向对象编程中的基石，它允许我们创建新的对象，同时共享或继承父对象的数据和行为。JavaScript的继承方式独具一格，不同于其他面向对象语言，它提供了灵活多样的继承选择。本文将深入解析JavaScript中的6种继承方式：原型链继承、构造函数继承、组合继承、寄生组合继承（最优）、原型式继承和寄生式继承。

1. 原型链继承

原型链继承是JavaScript最基本、最直观的继承方式。它通过原型链实现继承，即子对象继承父对象原型上的属性和方法。原型链是一种隐式继承，不需要显式声明。

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

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

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

Student.prototype = new Person();

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

student.greet(); // Hello, my name is John Doe.

2. 构造函数继承

构造函数继承是另一种常见的继承方式，它通过调用父对象的构造函数来实现继承。构造函数继承需要显式声明，并且子对象的构造函数必须调用父对象的构造函数。

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();

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

student.greet(); // Hello, my name is John Doe.

3. 组合继承

组合继承结合了原型链继承和构造函数继承的优点，它通过调用父对象的构造函数和设置子对象的原型来实现继承。组合继承需要显式声明，并且子对象的构造函数必须调用父对象的构造函数。

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 Doe', 'Computer Science');

student.greet(); // Hello, my name is John Doe.

4. 寄生组合继承（最优）

寄生组合继承是组合继承的改进版本，它通过创建临时构造函数来避免多余的原型链查找。寄生组合继承需要显式声明，并且子对象的构造函数必须调用父对象的构造函数。

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

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

function Student(name, major) {
  const temp = new Person(name);
  this.name = temp.name;
  this.major = major;
}

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

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

student.greet(); // Hello, my name is John Doe.

5. 原型式继承

原型式继承是通过创建一个新对象并将其原型设置为另一个对象的原型来实现继承。原型式继承不需要显式声明，并且子对象可以通过简单的对象赋值来继承父对象。

const person = {
  name: 'John Doe',
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

const student = Object.create(person);
student.major = 'Computer Science';

student.greet(); // Hello, my name is John Doe.

6. 寄生式继承

寄生式继承是通过创建一个新对象并将其原型设置为另一个对象的原型，然后通过添加新的属性和方法来实现继承。寄生式继承不需要显式声明，并且子对象可以通过简单的对象赋值来继承父对象。

const person = {
  name: 'John Doe',
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

const student = Object.create(person);
student.major = 'Computer Science';
student.greet = function() {
  console.log(`Hello, my name is ${this.name} and I'm a student.`);
};

student.greet(); // Hello, my name is John Doe and I'm a student.