谈起JS继承,我们首先来了解下什么是原型以及什么是原型链:

1:原型: 在JavaScript高级程序设计中给出的解释是· 每一个构造函数(对应的就是类函数)都有一个prototype属性(强调下是属性),这个prototype属性会指向一个原型对象(强调下是对象)。该原型属性指向的原型对象称之为原型
2:原型链: 每一个构造函数的原型属性会链式指向原型对象,每个原型对象都会有个constructor属性会指向构造函数(未定义时默认指向构造函数)其中形成了一种链式结构,我们称之为原型链。
贴个图详细说明:
JavaScript 实现继承的多种方式
那么如何在JS中实现继承呢?

1.构造继承:

这种技术的基本思想相当简单,即在子类型构造函数的内部调用超类型构造函数
例1:
JavaScript 实现继承的多种方式
特点:
1.实例并不是父类的实例,只是子类的实例
2.只能继承父类的实例属性和方法,不能继承原型属性/方法(报错地方)
3.创建子类实例时,可以向父类传递参数(var child = new Person.bind(child)(‘Ljf’))
4.无法实现函数复用,每个子类都有父类实例函数的副本,影响性能

2.原型继承:

将父类的实例作为子类的原型
例2:
JavaScript 实现继承的多种方式
特点:
1.非常纯粹的继承关系,实例是子类的实例,也是父类的实例
2.要想为子类新增属性和方法,必须要在new Person()这样的语句之后执行,不能放到构造器中
3.来自原型对象的所有属性被所有实例共享
4.创建子类实例时,无法向父类构造函数传参

3.组合继承:

组合构造和原型方式实现继承
通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用
例3:
JavaScript 实现继承的多种方式
特点:
1.实例是子类的实例,也是父类的实例
2.创建子类实例时,可以向父类传递参数
3.调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)
4.实现函数可复用

4.寄生继承:

寄生式继承的思路与寄生构造函数和工厂模式类似,即创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真地是它做了所有工作一样返回对象
例4:
JavaScript 实现继承的多种方式

5.寄生组合继承:

通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。其背后的基本思路是:不必为了指定子类型的原型而调用超类型的构造函数,我们所需要的无非就是超类型原型的一个副本而已。本质上,就是使用寄生式继承来继承超类型的原型,然后再将结果指定给子类型的原型。
例5:
JavaScript 实现继承的多种方式
特点:
1.实现较为复杂

相关文章:

  • 2021-09-20
  • 2021-11-15
  • 2022-03-05
  • 2021-11-20
  • 2022-12-23
  • 2021-09-26
  • 2022-02-20
猜你喜欢
  • 2021-10-20
  • 2021-10-07
  • 2022-02-17
  • 2021-12-15
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案