JS中的三种继承模式(原型链继承、借用构造函数继承、组合继承)

it2023-02-07  43

JS中的三种继承模式

写在前面:如果此篇博客中有任何错误的地方,欢迎大家的指正!让我们共同进步! 如果觉得这篇博客有用就点赞+收藏+关注三连吧!


JS中的继承模式大体分为三种: ①原型链继承 ②借用构造函数继承 ③组合继承

接下来让我们逐个的对其进行剖析。


方式一、继承模式-原型链继承 为了更好的理解为什么要这样做,我们来看一看这样做的图示: 代码核心思路: 通过将子类型的原型赋为父类型的一个实例对象,使得在创建子类的实例对象的时候可以逐步通过__proto__属性(隐式原型链)查找到父类的方法。

注意: 由于把子类型的prototype指向了另外一个对象,因此要注意子类型的方法要在继承后在写入,防止添加到普通的空Object实例对象后,由于指向重置,使其变为垃圾对象,从而丢失子类型自己的方法。


弊端思考: 这样就使得子类的实例也可以调用父类的方法啦! 但是仔细观察一下这个图示,相信悉心的同学已经发现了一个Bug。

①如果我们这样输出: ②其输出结果为:Supper() ③为了寻找这个问题的原因,我们直接打印输出sub对象。 ④输出结果如下: 我们发现果然是通过Suppuer的原型对象的constructor才找到的Supper,这显然是错误的。

图示理解如下:我们通过sub调用constructor,实际是从原型链依次查找,最终只在Supper的Prototype中查找到的constructor,因此指向的是Supper()。 解决方法:重新定向Sub.prototype.constructor = Sub;(代码的38句) 如此即可将这个bug消除。


方法二、继承模式-借用构造函数继承 接下来我们通过实例来进行演示。

执行结果如下: (注:此方法实质上是一种假继承,强行调用父类的构造函数,从而为子类添加属性,这里面其实没有继承,只是简化代码罢了。)

通过整合第一种方法和第二种方法的思路,进而有了第三个方法——组合继承。


方式三、继承模式-组合继承

组合的方法分为两步 ①利用原型链实现对父类型对象的方法继承 ②利用call()借用父类的构造函数初始化相同的属性

接下来让我们看一个实例。

执行结果如下: 这种方法的好处: ①对于属性:继承于父类的属性,单独存储在子类型实例对象中,因此每个实例对象的属性互不影响。 ②对于方法:方法则是通过原型链进行查找调用,在执行过程中通过this进行属性的动态绑定,因此不会在堆内存中占用多余的空间。

最新回复(0)