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 相关文章推荐
jQuery实现用方向键控制层的上下左右移动
Jan 13 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
js带按钮的提示框可供选择示例代码
Sep 17 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
requireJS使用指南
Apr 27 Javascript
vuejs如何配置less
Apr 25 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
微信小程序实现签字功能
Dec 23 Javascript
js实现抽奖的两种方法
Mar 19 Javascript
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写出自己的BLOG系统 2
2010/04/12 PHP
php 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
js数组操作常用方法
2014/05/08 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
美国网上花店:JustFlowers
2017/02/12 全球购物
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
自考毕业生自我鉴定
2013/11/04 职场文书
大学同学十年聚会感言
2014/02/21 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
群众路线领导对照材料
2014/08/23 职场文书
2014年节能工作总结
2014/12/18 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
python库sklearn常用操作
2021/08/23 Python
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers