JavaScript 寄生组合式继承

因为粉丝提出的建议 ,上一篇给大家讲了call()和apply()的基本使用方法 。这一篇文章中为大家讲解js继承 , 内容中也会结合call()方法的使用 , 算是趁热打铁 。 没有学过call()方法的要先学一下上篇文章哦 ~call()和apply()的用法

原型继承

说到继承 ,童靴们最先想到的可能是原型继承了。如下:

JavaScript 寄生组合式继承

如上方法中通过b.prototype=new a("hkk",23)实现b的原型继承了a , 但是这种方法有一个弊端 ,相信童靴们也能看出来 , 就是之后如果实例化函数b , 每个对象的属性name和age值都是一样的 ,都为“hkk”和23 。为了优化这个弊端 , 所以出现了组合继承。

组合继承

组合继承结合call()方法和原型的方式实现继承 , 如下:

JavaScript 寄生组合式继承

在函数b中使用call方法把父类a的属性继承 , 然后使用原型把父类原型上面的方法继承过来 。此时b也拥有了a上面的所有属性 ,所以就可以在实例化的时候为每个实例对象传入不同的参数 。当然,这种方法也有一个不足之处,就是使用call()方法已经拿到父类所有的属性 ,后面再使用原型时也会有父类所有属性 ,如下:

JavaScript 寄生组合式继承

如上,尽管子类的属性会覆盖掉原型上面的属性 ,可毕竟重复的东西看不来不太好。为了改善这个不足 , 我们需要封装一个方法 ,如下:

JavaScript 寄生组合式继承

封装如上函数 ,获取到传入函数的原型 , 在调用时传入父类函数 ,如下:

JavaScript 寄生组合式继承

此时 ,子类b的原型就只会继承到父类a原型上面的方法 , 而不是重复的基础父类a的属性了。

JavaScript 寄生组合式继承

最后还要注意的是 , 使用原型继承会使子类的构造器指向父类a ,所以我们需要用如下方法让b原型的构造器指向b.

JavaScript 寄生组合式继承

写在这里 ,一个较完善的继承也就完成了。下面附上完整的例子:

JavaScript 寄生组合式继承

你必须非常努力,才能看起来毫不费力 !

关注小白前端,持续收到文章推送~

最后,如果有想一起学习JavaScript的可以来一下我的前端群733581373,基本上头条里的好友都会在里面交流,分享一些学习的方法和需要注意的小细节,每天也会准时的讲一些JavaScript的炫酷特效,游戏,插件封装,设计模式等等!

如果想看到更加系统的文章和学习方法经验可以关注的微信号:‘web前端技术圈’或者‘webxh6’关注后回复‘2018’可以领取一套完整的学习视频

猜你喜欢

转载自blog.csdn.net/qq_40433465/article/details/82949748
今日推荐