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 FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
js实现适配不同的屏幕大小
Apr 10 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 Javascript
vue组件name的作用小结
May 23 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 Javascript
解决layer图标icon不加载的问题
Sep 04 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 Javascript
详解 javascript对象创建模式
Oct 30 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 过滤危险html代码
2009/06/29 PHP
PHP curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
模板引擎正则表达式调试小技巧
2011/07/20 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
php创建多级目录的方法
2015/03/24 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
微信小程序中显示html格式内容的方法
2017/04/25 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
python实现端口转发器的方法
2015/03/13 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
如何用Python 加密文件
2020/09/10 Python
装修设计师求职信
2014/02/26 职场文书
网络技术专业求职信
2014/07/13 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
工作调动申请报告
2015/05/18 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js