聊聊JS中的6大继承方式，我敢说，看完这篇文章你必定成为继承高手！🔥

前端

2023-12-19 16:41:41

前言

在计算机科学中，继承是一种代码复用技术，它允许我们创建新的类或对象，这些新类或对象具有已有类或对象的行为和属性。在 JavaScript 中，继承主要通过原型链和构造函数来实现。

继承概念

在 JavaScript 中，每个对象都有一个原型对象。原型对象是该对象的所有属性和方法的集合。当我们创建新对象时，该对象会从其原型对象继承所有属性和方法。这就是原型链。

原型链是一个对象指向其原型对象的引用链。当我们访问一个对象的属性或方法时，JavaScript 会沿着原型链向上查找，直到找到该属性或方法。如果在该对象的原型链中找不到该属性或方法，则 JavaScript 会返回 undefined。

1. 原型链继承

原型链继承是最简单、最常用的继承方式。它通过直接设置对象的原型属性来实现。

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

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

function Student(name, major) {
  // 设置 Student.prototype 为 Person 的实例
  Person.call(this, name);

  this.major = major;
}

// 设置 Student.prototype 为 Person.prototype 的实例
Student.prototype = Object.create(Person.prototype);

// 重写 greet 方法
Student.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and my major is ${this.major}.`);
};

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

2. 构造函数继承

构造函数继承是一种通过在子类的构造函数中调用父类的构造函数来实现继承的方式。

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

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

function Student(name, major) {
  // 在 Student 的构造函数中调用 Person 的构造函数
  Person.call(this, name);

  this.major = major;
}

// 设置 Student.prototype 的原型为 Person.prototype
Student.prototype = Object.create(Person.prototype);

// 重写 greet 方法
Student.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and my major is ${this.major}.`);
};

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

3. 组合继承

组合继承是原型链继承和构造函数继承的组合。它通过在子类的构造函数中调用父类的构造函数，并同时设置子类的原型属性来实现。

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

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

function Student(name, major) {
  // 在 Student 的构造函数中调用 Person 的构造函数
  Person.call(this, name);

  this.major = major;

  // 设置 Student.prototype 的原型为 Person.prototype
  Student.prototype = Object.create(Person.prototype);

  // 重写 greet 方法
  Student.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name} and my major is ${this.major}.`);
  };
}

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

4. 寄生组合继承

寄生组合继承是组合继承的变体。它通过创建一个临时函数来实现，该函数同时继承了父类和子类的属性和方法。

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

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

function Student(name, major) {
  // 创建一个临时函数
  function F() {}

  // 设置 F 的原型为 Person.prototype
  F.prototype = Person.prototype;

  // 创建一个新的对象
  const student = new F();

  // 将 student 的 name 和 major 属性设置为给定值
  student.name = name;
  student.major = major;

  // 设置 student 的原型为 Student.prototype
  Student.prototype = Object.create(student);

  // 重写 greet 方法
  Student.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name} and my major is ${this.major}.`);
  };

  // 返回新的对象
  return student;
}

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

5. ES6 Class

ES6 Class 是 JavaScript 中的一种新的继承语法。它类似于 Java 和 C++ 等其他编程语言中的 class。

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;
  }

  greet() {
    super.greet(); // 调用父类的方法
    console.log(`And my major is ${this.major}.`);
  }
}

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