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 相关文章推荐
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
JavaScript中的细节分析
Jun 30 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
js如何实现点击标签文字,文字在文本框出现
Aug 05 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
bootstrap table表格插件使用详解
May 08 Javascript
JS实现的RC4加密算法示例
Aug 16 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
MYSQL环境变量设置方法
2007/01/15 PHP
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
jQuery树插件zTree使用方法详解
2017/05/02 jQuery
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
线程和进程的区别及Python代码实例
2015/02/04 Python
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
python实现数字炸弹游戏
2020/07/17 Python
python缩进长度是否统一
2020/08/02 Python
Python Map 函数的使用
2020/08/28 Python
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
Carrs Silver官网:英国著名的银器品牌
2020/08/29 全球购物
安全生产管理合理化建议书
2014/03/12 职场文书
2014年内勤工作总结
2014/11/24 职场文书
公司租车协议书
2015/01/29 职场文书
会计做账心得体会
2016/01/22 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers