浅谈JavaScript面向对象--继承


Posted in Javascript onMarch 20, 2019

一、继承的概念

子类共享父类的数据和方法的行为,就叫继承。

二、E55如何实现继承?探索JavaScript继承的本质

2.1构造函数之间的“复制粘贴”

第一条路是通过构造函数来继承,这可以理解为子类直接复制了父类构造函数的代码,然后按照一定的规矩“粘贴”在自己的构造函数中,为己所用。举个例子:

浅谈JavaScript面向对象--继承

如果A要继承B的属性,是不是直接把this.name = name复制粘贴到A函数就可以了?简单粗暴。

所以在A中,直接执行B函数,不就等于执行了this.name = name吗。

浅谈JavaScript面向对象--继承

直接这样尝试下,发现是不行的,这是因为B中的this指向B的实例化对象,A中的this指向A的实例化对象,所以要统一this的指向。

浅谈JavaScript面向对象--继承

这样,就完成了一次合乎规范的构造函数之间的“代码复制粘贴”,也就是继承。这其实也是后面ES6中super关键字的实现原理。

2.2原型链上要“挤进一位来客”

当然,这还是不够的,因为在实际情况中,B这个构造函数还可以拓展一些方法和属性到原型链上,比如:

浅谈JavaScript面向对象--继承

我们在构造函数B中拓展了一个skill方法,发现上面那种“复制粘贴”的方法不好使了对吗?这是因为A的原型链和B的原型链还没有“建立联系”,我们需要在A和B之间搭一座桥,把他们联系起来。

熟悉基本原型链的同学都知道,原型链的“通信”是通过隐式原型(__proto__)来实现的。所以基本原型链是这样的:

浅谈JavaScript面向对象--继承

这就是基本的原型链,现在的情况是,A要继承B的属性和方法,所以B得加入到原型链中,并且,B要在A的上面,所以理想的情况是不是应该像下面这样:

浅谈JavaScript面向对象--继承

实际上我们也确实是这么做的,也就是令A.prototype.__proto__ = B.prototype。

控制台试一下,成功了。

浅谈JavaScript面向对象--继承

总结一下:ES5实现继承需要两步,第一:合乎规范的“代码复制粘贴”;第二,原型链上“搭座桥”。

三、ES6实现继承,其实只是换了种叫法

首先,要明确JavaScript是没有真正“类”的概念的,ES6中的类,就是ES5中构造函数。

浅谈JavaScript面向对象--继承

这件事是很容易验证的,类A的类型打印出来,就是function。

ES6实现类的继承,是不是也要“两步走”呢?答案是肯定的,看看ES6的继承如何实现:

浅谈JavaScript面向对象--继承

其实原理是完全一样的,extends相当于做了A.prototype.__proto__ = B.prototype这件事,而super则相当于执行了ES5中的B.call(this,name)这个操作,只是换个操作的名字向Java靠拢而已。

以上所述是小编给大家介绍的JavaScript面向对象继承详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery Ajax异步处理Json数据详解
Nov 05 Javascript
告诉你什么是javascript的回调函数
Sep 04 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
利用require.js与angular搭建spa应用的方法实例
Jul 19 Javascript
基于webpack 实用配置方法总结
Sep 28 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
Vuex中mutations与actions的区别详解
Mar 01 Javascript
JavaScript模拟实现网易云轮播效果
Apr 04 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 #Javascript
vue踩坑记录之数组定义和赋值问题
Mar 20 #Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 #Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 #Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 #Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 #Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 #Javascript
You might like
php+mysql分页代码详解
2008/03/27 PHP
php Memcache 中实现消息队列
2009/11/24 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
Python类定义和类继承详解
2015/05/08 Python
Python根据区号生成手机号码的方法
2015/07/08 Python
Sanic框架应用部署方法详解
2018/07/18 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
Python的logging模块基本用法
2020/12/24 Python
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
设计顾问服务计划书
2014/05/04 职场文书
文明礼仪伴我行演讲稿
2014/05/12 职场文书
党的群众路线学习材料
2014/05/16 职场文书
微笑服务标语
2014/06/24 职场文书
求职意向书
2014/07/29 职场文书
出国留学导师推荐信
2015/03/26 职场文书
详解MySQL集群搭建
2021/05/26 MySQL