前言
继承是指子类型具备父类型的属性和行为,使代码得以复用,做到设计上的分离。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次父类构造函数,生成了两份实例