前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript实现继承

JavaScript实现继承

作者头像
不作声
发布2020-10-30 11:39:54
3910
发布2020-10-30 11:39:54
举报
文章被收录于专栏:M不作声M不作声

在面向对象编程中有一个很重要的特性,就是继承,通过继承可以减小大量冗余的代码。

JS也是可以面向对象编程的,在JS里也有多种继承方式。

class继承

class是ES6增加的关键字,他的本质还是函数。

使用class继承非常简单。子类使用extends关键字表明继承于哪个类,并在子类中调用super(),这相当于使用call()改变this的指向。

class继承代码如下:

原型链继承

原型链继承就是使用的它的概念对象._proto_ = 构造函数.prototype

构造函数继承

组合继承

组合继承是原型链继承+构造函数继承,原型链继承的属性,构造函数继承方法。原型链继承会出现一个问题:包含引用类型值的原型属性,会被所有实例共享。构造函数继承的问题是:没有原型,无法复用

组合继承代码如下:

这种继承方式通过Father.call(this)继承父类的属性,通过new Father()继承父类的函数。优点在于构造函数可以传参,不会与父类共享属性,缺点是在继承父类函数的时候调用了父类的构造函数

寄生组合继承

组合继承的缺点是在继承时调用了父类的构造函数。寄生组合继承解决了两次调用的问题。

总结

  • 原型链继承来自父类原型对象的引用属性是所有子类共享的;创建子类实例时,无法向父类构造函数传参
  • 构造函数继承解决了上述问题,但无法实现函数的复用,方法在构造函数中定义,每次创建子类实例都会创建一个新方法,占用内存。
  • 组合继承解决了上述问题,使用原型继承继承父类的属性Parent.call(this),使用构造函数继承父类的方法new Parent()。但子类调用了两次父类构造函数,生成了两个父类实例。
  • 寄生组合继承解决了上述问题,但是使用复杂。
  • class是ES6的语法,使用extends指定继承的父类。

今天不学习,明天变垃圾。

欢迎关注公众号:前端大合集。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-10-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 大前端合集 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • class继承
  • 原型链继承
  • 构造函数继承
  • 组合继承
  • 寄生组合继承
  • 总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档