浅谈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打字小游戏代码
Dec 26 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
Jun 05 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
Mar 13 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
微信jssdk踩坑之签名错误invalid signature
May 19 Javascript
前端canvas中物体边框和控制点的实现示例
Aug 05 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&&mysql)四
2006/10/09 PHP
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
js遍历td tr等html元素
2012/12/13 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
Mint UI实现A-Z字母排序的城市选择列表
2018/12/28 Javascript
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
python字符串的拼接方法总结
2019/11/18 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
Django nginx配置实现过程详解
2020/09/10 Python
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
.net面试题
2016/09/17 面试题
流动人口婚育证明范本
2014/09/26 职场文书
自荐信大全
2019/03/21 职场文书
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS