返回

万变不离其宗:细说 JavaScript 继承的六种模式

前端

在 JavaScript 中,继承是实现代码复用和代码组织的重要手段。通过继承,我们可以让新对象继承已有对象的属性和方法,从而避免重复编写代码。

目前,JavaScript 中主要有六种继承模式:

  • 原型链继承
  • 构造函数继承
  • 组合继承
  • 原型式继承
  • 寄生组合继承
  • ES6 class

原型链继承

原型链继承是最简单也是最基本的一种继承模式。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。

在 JavaScript 中,每个函数都有一个 prototype 属性,指向该函数的原型对象。原型对象是一个普通的 JavaScript 对象,包含着该函数的属性和方法。

当我们使用 new 创建一个对象时,该对象就会继承其构造函数的原型对象。也就是说,该对象可以访问和使用原型对象中的所有属性和方法。

构造函数继承

构造函数继承是另一种常见的继承模式。其基本思想是通过在子构造函数中调用父构造函数来实现继承。

在构造函数继承中,子构造函数必须先调用父构造函数,然后才能执行自己的代码。这样,子对象就可以继承父对象的所有属性和方法。

组合继承

组合继承是原型链继承和构造函数继承的结合。其基本思想是先通过原型链继承实现继承,然后再通过构造函数继承实现属性的初始化。

组合继承既可以实现属性的继承,也可以实现方法的继承。但是,组合继承的代码比较复杂,而且容易出错。

原型式继承

原型式继承是一种不使用构造函数的继承模式。其基本思想是通过创建一个对象,然后将该对象作为原型对象,然后使用 Object.create() 方法来创建新对象。

原型式继承的优点是简单易懂,而且代码量少。但是,原型式继承不能实现构造函数继承的属性初始化功能。

寄生组合继承

寄生组合继承是原型链继承和构造函数继承的结合。其基本思想是先通过寄生继承实现属性的继承,然后再通过组合继承实现方法的继承。

寄生组合继承既可以实现属性的继承,也可以实现方法的继承。而且,寄生组合继承的代码相对简单,而且不容易出错。

ES6 class

ES6 中引入了一种新的继承模式:class。class 继承的语法与 Java 和 C++ 等其他语言中的 class 继承类似。

class 继承的优点是简单易懂,而且代码量少。但是,class 继承只能用于继承类,不能用于继承对象。

总结

JavaScript 中的继承模式多种多样,各有优缺点。我们可以根据实际情况选择合适的继承模式。

在实际项目中,我们经常会使用组合继承模式。组合继承模式既可以实现属性的继承,也可以实现方法的继承。而且,组合继承的代码相对简单,而且不容易出错。