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实现效果比较好的table选中行颜色
Mar 25 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
JavaScript位移运算符(无符号) >>> 三个大于号 的使用方法详解
Mar 31 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
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
Windows下的PHP安装pear教程
2014/10/24 PHP
php实现的用户查询类实例
2015/06/18 PHP
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
简单实现js浮动框
2016/12/13 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
thinkjs之页面跳转同步异步操作
2017/02/05 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
django中使用vue.js的要点总结
2019/07/07 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
答题辅助python代码实现
2018/01/16 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
Python logging模块用法示例
2018/08/28 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
总裁助理岗位职责
2014/02/17 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
治庸问责心得体会
2014/09/12 职场文书
转让协议书范本
2014/09/13 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js