浅谈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 XML数据显示为HTML一例
Dec 23 Javascript
JavaScript中window、doucment、body的解释
Aug 14 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
JS辨别访问浏览器判断是android还是ios系统
Aug 19 Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
基于vue-ssr服务端渲染入门详解
Jan 08 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
关于angular引入ng-zorro的问题浅析
Sep 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
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
php图像生成函数之间的区别分析
2012/12/06 Javascript
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
JavaScript实现强制重定向至HTTPS页面
2015/06/10 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
用Python将IP地址在整型和字符串之间轻松转换
2017/03/22 Python
Python的IDEL增加清屏功能实例
2017/06/19 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
Django查询数据库的性能优化示例代码
2017/09/24 Python
python绘制简单折线图代码示例
2017/12/19 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
django中静态文件配置static的方法
2018/05/20 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
Python 3.8 新功能全解
2019/07/25 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
工会经费申请报告
2015/05/15 职场文书
体育教师教学随笔
2015/08/15 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书