开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第32天，点击查看活动详情

前言

继承是指子类型具备父类型的属性和行为，使代码得以复用，做到设计上的分离。JavaScript 中的继承主要通过原型链和构造函数来实现。本节就和大家一起来梳理一下 javascript 中常见的那些继承方式

分类

常见的继承方法有：ES6 中 class 的 extend，原型链继承，借用构造函数继承，组合式继承等，我们逐一说明和举例

ES6 中 class 的 extend

首先来个最简单的，也是官方提供的标准方法，后面实现继承的方法多少都有点绕

Class 可以通过extends关键字实现继承，让子类继承父类的属性和方法。extends 的写法比 ES5 的原型链继承，要清晰和方便很多

class Person {
    constructor() {
        this.age = 18
    }
}
class Student extends Person {
    constructor() {
        super()
        this.name = '小明'
    }
}

记得继承时要使用super()，super在这里表示父类的构造函数，用来新建一个父类的实例对象

• 优点：清晰方便
• 缺点：不是所有浏览器都支持 class

原型链继承

原型链实现继承核心只有一句话：将父类的实例作为子类的原型

原型链的出现本身就是为了实现对象间共享方法，直接将父类实例放在子类原型上，子类自然而然就可以通过原型访问父类的方法和属性了

function Parent () {
    this.age = 18
}
function Child () {
    this.name = '小明'
}
Child.prototype = new Parent()

• 优点：父类新增原型方法/属性，子类都能访问到

• 缺点：

  • 如果要想为子类新增属性和方法，必须要在父类实例化赋值之后
  • 来自原型对象的所有属性被所有实例所共享（父类属性都是引用数据类型）

借用构造函数继承

看到借用构造函数很容易想到，在子类中调用父类构造函数，就可以把父类的属性转移到子类

核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）

function Parent () {
    this.age = 18
}
function Child () {
    this.name = '小明'
    Parent.call(this)
}

• 优点：解决了父类属性数据引用问题，并且可以实现多继承

• 缺点：

  • 只能继承父类的实例属性和方法，不能继承原型上的实例和方法
  • 无法实现函数复用，每个子类都有父类实例的副本

组合式继承（伪经典继承）

这种方法是上面两种的结合体，通过调用父类构造函数，继承父类的属性，然后通过将父类实例作为子类原型，实现函数复用

function Parent () {
    this.age = 18
}
function Child () {
    Parent.call(this)
    this.name = '小明'
}
Child.prototype = new Parent()

• 优点：

  • 既可以继承实例的属性和方法，也可以继承原型的属性和方法
  • 不存在引用属性共享问题
  • 函数可以复用

• 缺点：

  • 调用了2次父类构造函数，生成了两份实例