浅谈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 相关文章推荐
Javascript 运动中Offset的bug解决方案
Dec 24 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
js实现图片上传并正常显示
Dec 19 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
Apr 13 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 Javascript
Javascript Promise用法详解
May 10 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
详解Vuex下Store的模块化拆分实践
Jul 31 Javascript
countUp.js实现数字滚动效果
Oct 18 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
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
php获取远程文件大小
2015/10/20 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
javascript RadioButtonList获取选中值
2009/04/09 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
js URL参数的拼接方法比较
2012/02/15 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
jQuery操作cookie
2016/08/08 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
《莫高窟》教学反思
2014/02/25 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
婚礼双方父亲致辞
2015/07/27 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL
python_tkinter弹出对话框创建
2022/03/20 Python
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis