盘点 javascript 中的那些继承

简介: javascript 中的那些继承

45b589dd57fa1744afd63230ca88f63.png

前言

继承是指子类型具备父类型的属性和行为,使代码得以复用,做到设计上的分离。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次父类构造函数,生成了两份实例
相关文章
|
8天前
|
JavaScript 前端开发
Javascript如何实现继承?
【10月更文挑战第24天】JavaScript 中实现继承的方式有很多种,每种方式都有其优缺点和适用场景。在实际开发中,我们需要根据具体的需求和情况选择合适的继承方式,以实现代码的复用和扩展。
|
2天前
|
JavaScript 前端开发
如何使用原型链继承实现 JavaScript 继承?
【10月更文挑战第22天】使用原型链继承可以实现JavaScript中的继承关系,但需要注意其共享性、查找效率以及参数传递等问题,根据具体的应用场景合理地选择和使用继承方式,以满足代码的复用性和可维护性要求。
|
2天前
|
JavaScript 前端开发 开发者
js实现继承怎么实现
【10月更文挑战第26天】每种方式都有其优缺点和适用场景,开发者可以根据具体的需求和项目情况选择合适的继承方式来实现代码的复用和扩展。
14 1
|
5月前
|
设计模式 JavaScript 前端开发
在JavaScript中,继承是一个重要的概念,它允许我们基于现有的类(或构造函数)创建新的类
【6月更文挑战第15天】JavaScript继承促进代码复用与扩展,创建类层次结构,但过深的继承链导致复杂性增加,紧密耦合增加维护成本,单继承限制灵活性,方法覆盖可能隐藏父类功能,且可能影响性能。设计时需谨慎权衡并考虑使用组合等替代方案。
46 7
|
5月前
|
JavaScript 前端开发
在 JavaScript 中,实现继承的方法有多种
【6月更文挑战第15天】JavaScript 继承常见方法包括:1) 原型链继承,利用原型查找,实例共享原型属性;2) 借用构造函数,避免共享,但方法不在原型上复用;3) 组合继承,结合两者优点,常用但有额外开销;4) ES6 的 class,语法糖,仍基于原型链,提供直观的面向对象编程。
36 7
|
2月前
|
自然语言处理 JavaScript 前端开发
一文梳理JavaScript中常见的七大继承方案
该文章系统地概述了JavaScript中七种常见的继承模式,包括原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合继承等,并探讨了每种模式的实现方式及其优缺点。
一文梳理JavaScript中常见的七大继承方案
|
2月前
|
JavaScript 前端开发
js之class继承|27
js之class继承|27
|
2月前
|
JSON JavaScript 前端开发
js原型继承|26
js原型继承|26
|
2月前
|
JavaScript 前端开发 开发者
JavaScript 类继承
JavaScript 类继承
19 1
|
2月前
|
JavaScript 前端开发
JS的几种继承方式
JavaScript中的几种继承方式视频。
14 0