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 相关文章推荐
该如何加载google-analytics(或其他第三方)的JS
May 13 Javascript
在javascript中关于节点内容加强
Apr 11 Javascript
js替换字符串的所有示例代码
Jul 23 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 Javascript
原生js实现五子棋游戏
May 28 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检查网站是否宕机的方法示例
2017/07/24 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
koa2+vue实现登陆及登录状态判断
2019/08/15 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
python pandas生成时间列表
2019/06/29 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
python小项目之五子棋游戏
2019/12/26 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
上海天奕面试题笔试题
2015/04/19 面试题
教师党员一句话承诺
2014/03/28 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
捐款倡议书
2014/04/14 职场文书
毕业生应聘求职信
2014/07/10 职场文书
重阳节活动总结
2014/08/27 职场文书
技术入股合作协议书
2016/03/21 职场文书
Java使用jmeter进行压力测试
2021/07/09 Java/Android