浅谈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 相关文章推荐
js调用AJAX时Get和post的乱码解决方法
Jun 04 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 Javascript
学习JavaScript设计模式(策略模式)
Nov 26 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
Javascript vue.js表格分页,ajax异步加载数据
Oct 24 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
Vue使用axios出现options请求方法
May 30 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
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
PHP中操作ini配置文件的方法
2013/04/25 PHP
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
微信小程序实时聊天WebSocket
2018/07/05 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
python 中的列表解析和生成表达式
2011/03/10 Python
python根据路径导入模块的方法
2014/09/30 Python
Python中的filter()函数的用法
2015/04/27 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
python deque模块简单使用代码实例
2020/03/12 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
Android面试题附答案
2014/12/08 面试题
经贸日语专业个人求职信
2013/12/13 职场文书
亲子活动总结
2014/04/26 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
质量保证书
2015/01/17 职场文书
结婚十年感言
2015/07/31 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书
Go各时间字符串使用解析
2021/04/02 Golang
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL