JavaScript类的继承方法小结【组合继承分析】


Posted in Javascript onJuly 11, 2018

本文实例讲述了JavaScript类的继承方法。分享给大家供大家参考,具体如下:

在JavaScript 里,被继承的函数称为超类型(父类,基类也行,其他语言叫法),继承的函数称为子类型(子类,派生类)。继承也有之前问题,比如字面量重写原型会中断关系,使用引用类型的原型,并且子类型还无法给超类型传递参数。

为了解决引用共享和超类型无法传参的问题,我们采用一种叫借用构造函数的技术,或者成为对象冒充(伪造对象、经典继承)的技术来解决这两种问题。

function aObj(){
  this.name = ['小红','小强'];
  }
}
aObj.prototype.showname = ()=>{
  alert(this.name)
}
function bObj(){
  aObj.call(this); //只针对构造函数本身的继承 还需要继承原型
}

借用构造函数虽然解决了函数本身的继承,但没有继承原型链。所以,我们需要原型链+借用构造函数的模式,这种模式称为组合继承。

方法一:

bObj.prototype = aObj.prototype;

缺点:引用类型,在操作对象原型时候,直接改变堆内存中对象的方法

方法二:

bObj.prototype = new aObj();

这种继承借助原型并基于已有的对象创建新对象,同时还不必因此创建自定义类型,但是构造函数两次继承,不是很好

方法三:

bObj.prototype = Object.create(aObj.prototype);
bObj.prototype.constructor = bObj

使用a原型对象及其属性去创建一个新的对象,并将这个对象的constructor指向B函数本身,不存在重复继承的问题

方法四:

for (var i in aObj.prototype) {
  bObj.prototype[i] = aObj.prototype[i];
}

将a的原型链遍历给b对象,实现原型的深度拷贝,双方互不影响

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 二分法(数组array)
Apr 24 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
JavaScript日期时间与时间戳的转换函数分享
Jan 31 Javascript
jQuery.prop() 使用详解
Jul 19 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
JS数据类型判断的几种常用方法
Jul 07 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 #Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 #Javascript
JS实现动态生成html table表格的方法分析
Jul 11 #Javascript
vue监听键盘事件的快捷方法【推荐】
Jul 11 #Javascript
vue移动端实现红包雨效果
Jun 23 #Javascript
vue实现学生录入系统之添加删除功能
Jul 11 #Javascript
微信小程序实现红包雨功能
Jul 11 #Javascript
You might like
PHP_MySQL教程-第一天
2007/03/18 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
AJAX的使用方法详解
2017/04/29 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
javascript去掉代码里面的注释
2015/07/24 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
Python中的高级数据结构详解
2015/03/27 Python
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
h5封装下拉刷新
2020/08/25 HTML / CSS
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
药学专业大学生个人的自我评价
2013/11/04 职场文书
播音主持专业个人自我评价
2014/01/09 职场文书
班班通校本培训方案
2014/03/12 职场文书
服装设计师求职信
2014/06/04 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书