浅谈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类和继承 this属性使用说明
Sep 03 Javascript
说明你的Javascript技术很烂的五个原因
Apr 26 Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
微信小程序封装http访问网络库实例代码
May 24 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 Javascript
vue用递归组件写树形控件的实例代码
Jul 19 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 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同时支持GIF、png、JPEG
2006/10/09 PHP
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
php截取字符串函数分享
2015/02/02 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
JS定时器实例详细分析
2013/10/11 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
js实现交通灯效果
2017/01/13 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
Python学习笔记_数据排序方法
2014/05/22 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
python解决pandas处理缺失值为空字符串的问题
2018/04/08 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
高中军训感想300字
2014/03/04 职场文书
个人授权委托书
2014/04/03 职场文书
2014年法院工作总结
2014/11/24 职场文书
政府会议通知范文
2015/04/15 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
Python list列表删除元素的4种方法
2021/11/01 Python
Golang连接并操作MySQL
2022/04/14 MySQL