JavaScript 七大继承类型，化繁为简深入解析与对比

JavaScript 继承概述

JavaScript 是一种面向对象的编程语言，它支持继承。继承是面向对象编程的一项重要特性，它允许子类从父类继承属性和方法。这使得我们可以方便地创建新的类，而无需重复编写代码。JavaScript 的继承分为原型继承和类继承两种方式。

JavaScript 七大继承类型

1. 原型继承

原型继承是 JavaScript 的默认继承方式。原型继承的实现机制是，子类的原型指向父类的原型。这样，子类就继承了父类的所有属性和方法。

function Parent() {
  this.name = 'Parent';
}

function Child() {
  this.age = 18;
}

Child.prototype = new Parent();

const child = new Child();
console.log(child.name); // Parent
console.log(child.age); // 18

2. 类继承

ES6 引入了类继承，类继承的语法更接近于 Java、C++ 等语言。类继承的实现机制是，子类通过 extends 继承父类。这样，子类就继承了父类的所有属性和方法。

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

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
}

const child = new Child('John', 18);
console.log(child.name); // John
console.log(child.age); // 18

3. 组合继承

组合继承是原型继承和类继承的结合。组合继承的实现机制是，子类通过原型继承继承父类的属性和方法，同时通过类继承继承父类的构造函数。这样，子类既可以继承父类的属性和方法，又可以调用父类的构造函数。

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

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

Child.prototype = new Parent();

const child = new Child('John', 18);
console.log(child.name); // John
console.log(child.age); // 18

4. 寄生继承

寄生继承是通过创建一个新的对象，并将其作为子类的原型来实现继承。这样，子类就继承了新对象的属性和方法。

function Parent() {
  this.name = 'Parent';
}

function Child() {
  const parent = new Parent();
  Object.assign(this, parent);
}

const child = new Child();
console.log(child.name); // Parent

5. 寄生组合继承

寄生组合继承是寄生继承和组合继承的结合。寄生组合继承的实现机制是，子类通过寄生继承继承父类的属性和方法，同时通过组合继承继承父类的构造函数。这样，子类既可以继承父类的属性和方法，又可以调用父类的构造函数。

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

function Child(name, age) {
  const parent = new Parent(name);
  Object.assign(this, parent);
  this.age = age;
}

Child.prototype = new Parent();

const child = new Child('John', 18);
console.log(child.name); // John
console.log(child.age); // 18

6. ES6 class

ES6 class 是类继承的一种语法糖。ES6 class 的实现机制与类继承相同，只是语法更简洁。

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

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
}

const child = new Child('John', 18);
console.log(child.name); // John
console.log(child.age); // 18

JavaScript 继承类型总结

继承类型	优点	缺点
原型继承	简单易懂	无法调用父类的构造函数
类继承	语法更接近 Java、C++ 等语言	子类无法访问父类的私有属性和方法
组合继承	可以继承父类的属性和方法，也可以调用父类的构造函数	实现复杂，代码冗长
寄生继承	简单易懂，代码简洁	子类无法访问父类的私有属性和方法
寄生组合继承	可以继承父类的属性和方法，也可以调用父类的构造函数	实现复杂，代码冗长
ES6 class	语法简洁，代码可读性强	子类无法访问父类的私有属性和方法

JavaScript 继承类型对比

继承类型	实现机制	优缺点
原型继承	子类的原型指向父类的原型	简单易懂，但无法调用父类的构造函数
类继承	子类通过 extends 关键字继承父类	语法更接近 Java、C++ 等语言，但子类无法访问父类的私有属性和方法
组合继承	子类通过原型继承继承父类的属性和方法，同时通过类继承继承父类的构造函数	可以继承父类的属性和方法，也可以调用父类的构造函数，但实现复杂，代码冗长
寄生继承	通过创建一个新的对象，并将其作为子类的原型来实现继承	简单易懂，代码简洁，但子类无法访问父类的私有属性和方法
寄生组合继承	寄生继承和组合继承的结合	可以继承父类的属性和方法，也可以调用父类的构造函数，但实现复杂，代码冗长
ES6 class	类继承的一种语法糖	语法简洁，代码可读性强，但子类无法访问父类的私有属性和方法