es6 super关键字的理解与应用实例分析


Posted in Javascript onFebruary 15, 2020

本文实例讲述了es6 super关键字的理解与应用。分享给大家供大家参考,具体如下:

前面介绍了static关键字,class类还有另外一个关键字super

super不仅仅是一个关键字,还可以作为函数和对象。

函数:在子类继承父类中,super作为函数调用,只能写在子类的构造函数(constructor)里面,super代表的是父类的构造函数,

难点理解

但是执行过时supre()代表的是子类,super()里面的this指向子类的实例对象this。

class A {
 constructor() {
  console.log(new.target.name);
 }
}
class B extends A {
 constructor() {
  super();//这里的super相当于A类的constructor构造函数,会执行A的constructor,但是此时的this指
      //向的是B,所以打印出B
      //换一种方法理解是:在执行super时,A把constructor方法给了B,此时B有了A的功能,但是执
      //行的是B的内容,也就是es5的A.prototype.constructor.call(this)。
 }
}
new A() // A
new B() // B

对象:

这里重点理解下对象,概念相对抽象

super作为对象使用时,分为在普通方法中使用和在静态方法中使用

在普通方法找中使用:super指向父类的原型,即A.prototype,可以访问到原型上的方法和属性

逻辑抽象一:

ES6 规定,在子类普通方法中通过super调用父类的方法时,方法内部的this指向当前的子类实例。

class A {
 constructor() {
  this.x = 1;
 }
 print() {
  console.log(this.x);
 }
}
class B extends A {
 constructor() {
  super();
  this.x = 2;
 }
 m() {
  super.print();
 }
}
let b = new B();
b.m() // 2

super.print()虽然调用的是A.prototype.print(),但是A.prototype.print()内部的this指向子类B的实例

super作为对象,用在静态方法之中,这时super将指向父类,而不是父类的原型对象。

class Parent {
 static myMethod(msg) {
  console.log('static', msg);
 }
 myMethod(msg) {
  console.log('instance', msg);
 }
}
class Child extends Parent {
 static myMethod(msg) {
  super.myMethod(msg);
 }
 myMethod(msg) {
  super.myMethod(msg);
 }
}
Child.myMethod(1); // static 1
var child = new Child();
child.myMethod(2); // instance 2

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
巧妙破除网页右键禁用的十大绝招
Aug 12 Javascript
Prototype使用指南之form.js
Jan 10 Javascript
jquery创建div 实现代码
Apr 27 Javascript
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 Javascript
Array.prototype 的泛型应用分析
Apr 30 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
JavaScript基础——使用Canvas绘图
Nov 02 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 #Javascript
Vue父子传递实例讲解
Feb 14 #Javascript
Javascript操作select控件代码实例
Feb 14 #Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 #Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 #Javascript
node事件循环和process模块实例分析
Feb 14 #Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 #Javascript
You might like
用PHP实现的生成静态HTML速度快类库
2007/03/31 PHP
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
js 链式延迟执行DOME
2012/01/04 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
简单介绍Python中的RSS处理
2015/04/13 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
python numpy存取文件的方式
2020/04/01 Python
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
机关财务管理制度
2014/01/17 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
高三家长寄语
2014/04/03 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
神龙架导游词
2015/02/11 职场文书
班主任寄语2015
2015/02/26 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技