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实现的检测浏览器和系统的函数
Apr 09 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
Apr 17 Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
基于javascript实现窗口抖动效果
Jan 03 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 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
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
各种快递查询--Api接口
2016/04/26 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
调试php程序的简单步骤
2019/10/04 PHP
Jquery cookie操作代码
2010/03/14 Javascript
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
python 生成目录树及显示文件大小的代码
2009/07/23 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
Python Subprocess模块原理及实例
2019/08/26 Python
Python 实现自动导入缺失的库
2019/10/29 Python
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
大学生秋游活动方案
2014/02/17 职场文书
表决心的诗句大全
2014/03/11 职场文书
企业法人授权委托书
2014/04/03 职场文书
4s店活动策划方案
2014/08/25 职场文书
2014年教研员工作总结
2014/12/23 职场文书
实习科室评语
2015/01/04 职场文书
男方婚礼答谢词
2015/01/20 职场文书
判断Python中的Nonetype类型
2021/05/25 Python