盘点 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次父类构造函数,生成了两份实例
相关文章
|
15小时前
|
JavaScript 前端开发
JavaScript 继承的方式和优缺点
JavaScript 继承的方式和优缺点
15 0
|
15小时前
|
JavaScript 前端开发 Java
深入JS面向对象(原型-继承)(三)
深入JS面向对象(原型-继承)
31 0
|
15小时前
|
JavaScript 前端开发 Java
深入JS面向对象(原型-继承)(一)
深入JS面向对象(原型-继承)
32 0
|
15小时前
|
JavaScript 前端开发
js开发:请解释原型继承和类继承的区别。
JavaScript中的原型继承和类继承用于共享对象属性和方法。原型继承利用原型链查找属性,节省内存但不支持私有成员。类继承通过ES6的class和extends实现,支持私有成员但占用更多内存。两者各有优势,适用于不同场景。
22 0
|
15小时前
|
JavaScript
|
15小时前
|
JavaScript 前端开发
原型继承在 JavaScript 中是如何工作
原型继承在 JavaScript 中是如何工作
21 0
|
15小时前
|
JavaScript 前端开发
JavaScript 中最常用的继承方式
【5月更文挑战第9天】JavaScript中的继承有多种实现方式:1) 原型链继承利用原型查找,但属性共享可能引发问题;2) 借用构造函数避免共享,但方法复用不佳;3) 组合继承结合两者优点,是最常用的方式;4) ES6的class继承,是语法糖,仍基于原型链,提供更直观的面向对象编程体验。
15 1
|
15小时前
|
设计模式 JavaScript 前端开发
在JavaScript中,继承是一个重要的概念
【5月更文挑战第9天】JavaScript继承有优点和缺点。优点包括代码复用、扩展性和层次结构清晰。缺点涉及深继承导致的复杂性、紧耦合、单一继承限制、隐藏父类方法以及可能的性能问题。在使用时需谨慎,并考虑其他设计模式。
14 2
|
15小时前
|
JavaScript 前端开发 开发者
JavaScript 继承的方式和优缺点
JavaScript 继承的方式和优缺点
11 0
|
15小时前
|
JavaScript 前端开发
JavaScript 继承的方式和优缺点
JavaScript 继承的方式和优缺点