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 相关文章推荐
Javascript模块模式分析
May 16 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
swiperjs实现导航与tab页的联动
Dec 13 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中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
python验证码识别的示例代码
2017/09/21 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
使用python实现滑动验证码功能
2019/08/05 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
党校自我鉴定范文
2013/10/02 职场文书
幼儿教师个人总结
2015/02/05 职场文书
看雷锋电影观后感
2015/06/10 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python
常用的Python代码调试工具总结
2021/06/23 Python
Elasticsearch 基本查询和组合查询
2022/04/19 Python