浅谈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 相关文章推荐
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
Ajax执行顺序流程及回调问题分析
Dec 10 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
JSONP原理及简单实现
Jun 08 Javascript
xmlplus组件设计系列之列表(4)
Apr 26 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
js实现HTML中Select二级联动的实例
Jan 05 Javascript
彻底理解js面向对象之继承
Feb 04 Javascript
在Mac下彻底卸载node和npm的方法
May 16 Javascript
js实现简单进度条效果
Mar 25 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 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 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
纯php打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
Yii配置文件用法详解
2014/12/04 PHP
toString()一个会自动调用的方法
2010/02/08 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
node.js中的require使用详解
2014/12/15 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
讲解Python中fileno()方法的使用
2015/05/24 Python
Django验证码的生成与使用示例
2017/05/20 Python
python字典的setdefault的巧妙用法
2019/08/07 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
意大利奢侈品网站:Italist
2016/08/23 全球购物
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
限量版运动鞋和街头服饰:TheDrop
2020/09/06 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
教育局长自荐信范文
2013/12/22 职场文书
公司部门司机岗位职责
2014/01/03 职场文书
高中军训感想800字
2014/02/23 职场文书
入党思想汇报怎么写
2014/04/03 职场文书
金融与证券专业求职信
2014/06/22 职场文书
医疗纠纷调解协议书
2015/08/06 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python