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 相关文章推荐
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
js窗口震动小程序分享
Nov 28 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
详解JSON和JSONP劫持以及解决方法
Mar 08 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 Javascript
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
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实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
JavaScript 事件的一些重要说明
2009/10/25 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
Function.prototype.apply()与Function.prototype.call()小结
2016/04/27 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
Javascript Promise用法详解
2018/05/10 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
Python Logging 日志记录入门学习
2018/06/02 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
Python PIL图片添加字体的例子
2019/08/22 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
Python如何读写字节数据
2020/08/05 Python
python如何设置静态变量
2020/09/07 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
测试时代收集的软件测试面试题
2013/09/25 面试题
实习护士自荐信
2014/06/21 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
考勤制度通知
2015/04/25 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
详解JS数组方法
2021/11/20 Javascript
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers