深入浅析ES6 Class 中的 super 关键字


Posted in Javascript onOctober 20, 2017

以下只是个人的学习笔记:

super这个关键字,既可以当作函数使用,也可以当作对象使用。在这两种情况下,它的用法完全不同。

1、当作函数使用

class A {}
class B extends A {
 constructor() {
  super(); //ES6 要求,子类的构造函数必须执行一次super函数。
 }
}

注意,super虽然代表了父类A的构造函数,但是返回的是子类B的实例,即super内部的this指的是B,因此super()在这里相当于A.prototype.constructor.call(this)。

class A {
 constructor() {
  console.log(new.target.name); //new.target指向当前正在执行的函数
 }
}
class B extends A {
 constructor() {
  super();
 }
}
new A() // A
new B() // B

可以看到,在super()执行时,它指向的是子类B的构造函数,而不是父类A的构造函数。也就是说,super()内部的this指向的是B。

2、当作对象使用

在普通方法中,指向父类的原型对象;在静态方法中,指向父类。

class A {
 c() {
  return 2;
 }
}
class B extends A {
 constructor() {
  super();
  console.log(super.c()); // 2
 }
}
let b = new B();

上面代码中,子类B当中的super.c(),就是将super当作一个对象使用。这时,super在普通方法之中,指向A.prototype,所以super.c()就相当于A.prototype.c()。

通过super调用父类的方法时,super会绑定子类的this。

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

上面代码中,super.s()虽然调用的是A.prototype.s(),但是A.prototype.s()会绑定子类B的this,导致输出的是2,而不是1。也就是说,实际上执行的是super.s.call(this)。

由于绑定子类的this,所以如果通过super对某个属性赋值,这时super就是this,赋值的属性会变成子类实例的属性。

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

上面代码中,super.x赋值为3,这时等同于对this.x赋值为3。而当读取super.x的时候,读的是A.prototype.x,所以返回undefined。

注意,使用super的时候,必须显式指定是作为函数、还是作为对象使用,否则会报错。

class A {}
class B extends A {
 constructor() {
  super();
  console.log(super); // 报错
 }
}

上面代码中,console.log(super)当中的super,无法看出是作为函数使用,还是作为对象使用,所以 JavaScript 引擎解析代码的时候就会报错。这时,如果能清晰地表明super的数据类型,就不会报错。

最后,由于对象总是继承其他对象的,所以可以在任意一个对象中,使用super关键字。

总结

以上所述是小编给大家介绍的ES6 Class 中的 super 关键字,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 字符串乘法
Aug 20 Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
关于JavaScript中的关联数组分析
Apr 09 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
jQuery Dialog 取消右上角删除按钮事件
Sep 07 Javascript
js实现横向拖拽导航条功能
Feb 17 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
使用vue-router完成简单导航功能【推荐】
Jun 28 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
layui的面包屑或者表单不显示的解决方法
Sep 05 Javascript
详解vue3中组件的非兼容变更
Mar 03 Vue.js
vue做网页开场视频的实例代码
Oct 20 #Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 #Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 #Javascript
2种简单的js倒计时方式
Oct 20 #Javascript
pm2 部署 node的三种方法示例
Oct 20 #Javascript
vue.js实例对象+组件树的详细介绍
Oct 20 #Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 #Javascript
You might like
长波有什么东西
2021/03/01 无线电
MVC模式的PHP实现
2006/10/09 PHP
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
跟我学Laravel之路由
2014/10/15 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
封装的原生javascript弹出层代码
2010/09/24 Javascript
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
2019/08/16 Javascript
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
解决Mac下使用python的坑
2019/08/13 Python
python 动态调用函数实例解析
2019/10/21 Python
使用Pyhton 分析酒店针孔摄像头
2020/03/04 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
2014年依法行政工作总结
2014/11/19 职场文书
党风廉正建设责任书
2015/01/29 职场文书
Python中requests库的用法详解
2022/06/05 Python
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS