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 相关文章推荐
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
理解Javascript_05_原型继承原理
Oct 13 Javascript
用JQuery在网页中实现分隔条功能的代码
Aug 09 Javascript
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
windows下vue-cli导入bootstrap样式
Apr 25 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 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生成唯一订单号
2015/07/05 PHP
php实现微信公众号无限群发
2015/10/11 PHP
php ZipArchive实现多文件打包下载实例
2019/10/31 PHP
flash 得到自身url参数的代码
2009/11/15 Javascript
jquery.validate使用攻略 第一部
2010/07/01 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
详解在AngularJS的controller外部直接获取$scope
2017/06/02 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
Python 的类、继承和多态详解
2017/07/16 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
python读取中文txt文本的方法
2018/04/12 Python
python多进程实现文件下载传输功能
2018/07/28 Python
解决python flask中config配置管理的问题
2019/07/26 Python
Python中turtle库的使用实例
2019/09/09 Python
python 弧度与角度互转实例
2020/04/15 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
大学军训通讯稿
2014/01/13 职场文书
2014年测量员工作总结
2014/12/12 职场文书
离婚律师函范本
2015/05/27 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书