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 相关文章推荐
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
原来Jquery.load的方法可以一直load下去
Mar 28 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
node网页分段渲染详解
Sep 05 Javascript
JavaScript实现前端实时搜索功能
Mar 26 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
Feb 14 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
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 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
php面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
php 解压rar文件及zip文件的方法
2014/05/05 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
最短的IE判断代码
2011/03/13 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
python处理数据,存进hive表的方法
2018/07/04 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
python 输出所有大小写字母的方法
2019/01/02 Python
Django操作session 的方法
2020/03/09 Python
keras 读取多标签图像数据方式
2020/06/12 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
应届毕业生个人求职信范文
2014/01/29 职场文书
主办会计岗位职责
2014/03/13 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
Python机器学习三大件之一numpy
2021/05/10 Python
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL