深入剖析 JS 中的 7 种常用继承方式，助力开发者的代码之路

2023-09-20 00:58:08

深入解析 JavaScript 的继承机制

JavaScript 作为一门强大的编程语言，在继承方面提供了多种选择，每种方式都有其独特的优缺点，适合不同的场景和应用需求。本文将逐一介绍这些继承方式，帮助读者全面了解并掌握 JS 的继承机制，从而写出更具可读性和可维护性的代码。

原型链继承

想象一下 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 调用 greet() 方法时，它会先检查自己的属性，如果没有找到，就会沿着原型链向上查找，直到找到 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");
student.greet(); // Hello, my name is John

在这个例子中，Student 通过调用 Person 的构造函数来创建 student 对象。通过这种方式，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.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

const student = new Student("John", "Computer Science");
student.greet(); // Hello, my name is John

在这个例子中，Student 首先通过调用 Person 的构造函数来创建 student 对象。然后，它通过 Object.create() 方法将 Student.prototype 链接到 Person.prototype。最后，它将 Student.prototype.constructor 属性指向 Student 构造函数，以确保子类的 constructor 属性指向正确的构造函数。

寄生组合继承

寄生组合继承就像一个间谍，它通过创造一个中间对象来偷偷地继承属性和方法。

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);
  temp.major = major;
  return temp;
}

const student = new Student("John", "Computer Science");
student.greet(); // Hello, my name is John

在这个例子中，Student 通过创建一个中间对象 temp 来创建 student 对象。它然后调用 Person 的构造函数，将 temp 作为上下文。最后，它将 major 属性添加到 temp 对象并返回它。

extends

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

在这个例子中，Student 通过 extends 关键字继承 Person 类。它自动链接了原型对象和构造函数，从而简化了继承过程。

mixin

Mixin 就像一个工具箱，它包含了一组可重用的方法，可以添加到其他对象中。它提供了扩展对象功能的灵活性。

const mixin = {
  greet() {
    console.log("Hello, my name is " + this.name);
  }
};

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

Object.assign(Person.prototype, mixin);

const person = new Person("John");
person.greet(); // Hello, my name is John

在这个例子中，mixin 对象包含了一个 greet() 方法。Person 类通过 Object.assign() 方法将 mixin 的方法添加到其原型对象，从而扩展了 Person 的功能。

多重继承

JavaScript 本身不支持多重继承，但这可以通过使用接口来实现。接口就像合同，定义了对象必须实现的方法。

interface IAnimal {
  eat();
  sleep();
}

class Dog implements IAnimal {
  eat() {
    console.log("Dog is eating");
  }

  sleep() {
    console.log("Dog is sleeping");
  }
}

class Cat implements IAnimal {
  eat() {
    console.log("Cat is eating");
  }

  sleep() {
    console.log("Cat is sleeping");
  }
}

const dog = new Dog();
dog.eat(); // Dog is eating
dog.sleep(); // Dog is sleeping

const cat = new Cat();
cat.eat(); // Cat is eating
cat.sleep(); // Cat is sleeping