浅谈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 设计模式(二) 闭包
May 26 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
纯css+js写的一个简单的tab标签页带样式
Jan 28 Javascript
jQuery操作元素css样式的三种方法
Jun 04 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
React进阶学习之组件的解耦之道
Aug 07 Javascript
vue用递归组件写树形控件的实例代码
Jul 19 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
利用js canvas实现五子棋游戏
Oct 11 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 n个不重复的随机数生成代码
2009/06/23 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
两个php日期控制类实例
2014/12/09 PHP
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
自己使用总结Python程序代码片段
2015/06/02 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
Python3爬楼梯算法示例
2019/03/04 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
python判断正负数方式
2020/06/03 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
经营理念标语
2014/06/21 职场文书
劳资员岗位职责
2015/02/13 职场文书
开票证明
2015/06/23 职场文书
大学迎新生的欢迎词
2019/06/25 职场文书
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技