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

1、super当做函数使用

super 作为函数调用时,代表父类的构造函数。ES6 要求,子类的构造函数必须执行一次 super() 函数。注意:作为函数时,super() 只能用在子类的构造函数之中,用在其他地方就会报错。

class A {}
class B extends A {
constructor() {
super();
}
}

super 作为函数调用时,内部的 this 指的是子类实例

class A {
constructor() {
this.show();
}
}
class B extends A {
constructor() {
super();
}
show(){
console.log('实例');
}
static show(){
console.log('子类');
}
}
new B()  //输出 '实例' ,new B 时触发了 B 的构造函数,所以触发了 super 方法,即触发了父类 A 的构造函数,此时的 this.show 的 this 指的是子类

2、super 作为对象使用

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

2.1、super在普通方法中(即非静态方法)及此时的 this 关键字指向

class A {
p() {
return 2;
}
}
class B extends A {
constructor() {
super();
console.log(super.p()); // 2 此时的super指向父类原型对象,即 A.prototype
}
}
let b = new B();  //

由于在普通方法中的 super 指向父类的原型对象,所以如果父类上的方法或属性是定义在实例上的,就无法通过 super 调用的。如下所示:

class A {
constructor() { //在构造函数上定义的属性和方法相当于定义在父类实例上的,而不是原型对象上
this.p = 2;
}
}
class B extends A {
get m() {
return super.p;
}
} let b = new B();
console.log(b.m) // undefined

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

class A {
constructor() {
this.x = 1;
}
print() {
console.log(this.x);
}
}
class B extends A {
constructor() {
super();
this.x = 2;
   super.y = 123;  //如果通过super对某个属性赋值,这时super就是this,赋值的属性会变成子类实例的属性。
}
m() {
super.print();
}
}
let b = new B();
b.m() //
console.log(b.y); //

2.2、super在静态方法中及此时的 this 关键字指向

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

在子类的静态方法中通过 super 调用父类的方法时,方法内部的 this 指向当前的子类,而不是子类的实例。

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

ES6中类Class的super关键字的更多相关文章

  1. ES6中构造函数内super关键字的使用

    super关键字用于访问和调用一个对象的父对象上的函数. super.prop和super[expr]表达式在类和对象字面量任何方法定义中都是有效的. 语法 super([arguments]); / ...

  2. 你真的了解[super ]关键字吗?

    前言 此篇文章是看了阮老师的es6教程,看到super关键字的时候觉得有必要总结梳理一下,原文还是参考 ECMAScript 6入门. 正文 super 这个关键字,既可以当作函数使用,也可以当作对象 ...

  3. es6 super关键字

    rhttp://es6.ruanyifeng.com/#docs/class-extends super关键字,既可以当作函数使用,也可以当作对象使用.这俩种的使用是不一样的 第一种:函数使用 代表父 ...

  4. ES6中class方法及super关键字

    ES6 class中的一些问题 记录下class中的原型,实例,super之间的关系 //父类 class Dad { constructor(x, y) { this.x = 5; this.y = ...

  5. 浅谈ES6中super关键字

    作用: super 关键字用于访问父对象上的函数. 语法: super([arguments]); // 访问父对象上的构造函数 super.functionOnParent([arguments]) ...

  6. Es6 类的关键 super、static、constructor、new.target

    ES6引入了Class(类)这个概念,作为对象的模板,通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对 ...

  7. 24 类:组合 继承 super关键字 面向对象的三大性

    组合 组合:自定义类的对象作为另外一个类的属性 class Teacher: def __init__(self, name, age): self.name = name self.age = ag ...

  8. ES6 extends继承及super使用读书笔记

    extends 继承 extends 实现子类的继承 super() 表示父类的构造函数, 子类必须在 constructor中调用父类的方法,负责会报错. 子类的 this 是父类构造出来的, 再在 ...

  9. Class的使用,构造方法,实例属性和实例方法,静态属性和静态方法,this和super关键字,类的继承

    s6新增了一种定义对象实例的方法,Class(类)这个概念,作为对象的模板.class可以看作只是一个语法糖,通过class关键字,可以定义类.让对象原型的写法更加清晰.更像面向对象编程的语法. 一. ...

随机推荐

  1. EZOJ #362历史

    分析 就是保存前pi-1个数每个ai出现多少次 然后维护这些数当前剩余的最大值 每次和新加进来的比较即可 如果新的大直接取 否则新的最大值一定不大于原来的最大值 因此o(n) 代码 #include& ...

  2. 杂项-Unicode:Unicode

    ylbtech-杂项-Unicode:Unicode Unicode(统一码.万国码.单一码)是计算机科学领域里的一项业界标准,包括字符集.编码方案等.Unicode 是为了解决传统的字符编码方案的局 ...

  3. web接口开发基础知识-什么是web接口?

    比如我们访问百度的首页,输入的url地址是:https://www.baidu.com/ 那么当我们在浏览器地址栏中输入url,敲回车后,发生了什么事情?怎么就能通过1个url地址就能看到百度的首页了 ...

  4. gradle自动化打包apk

    前堤是要在安卓项目中配置好gradle.build脚本 ## !/bin/sh ## 项目名 ##使配置文件生效,否则会报gradle:命令找不到 source /etc/profile TARGET ...

  5. nginxUbuntu安装Nginx和正确卸载Nginx Nginx相关 与Nginx报错:nginx: [error] invalid PID number "" in "/run/nginx.pid" 解决方法

    https://www.cnblogs.com/zhaoyingjie/p/6840616.html https://blog.csdn.net/adley_app/article/details/7 ...

  6. UGUI OnValueChanged 动态参数指定

    在选择方法的时候注意,选择最上面的动态参数的方法.

  7. poj3253Fence Repair (Huffman)

    Huffman树:具有n个外部节点(叶子节点)的二叉树 每个外部节点都有一个对应的权值Wi 叶节点带权外部路径长度总和WPL=Wi*Li(i从1到n)最小(权越大的节点里根越进) 构造Huffman树 ...

  8. (转)https://wiki.debian.org/iwlwifi debian7下wifi intel 5100agn

    https://wiki.debian.org/iwlwifi Debian 7 "Wheezy" Add a "non-free" component to ...

  9. 图解Http阅读笔记(一)

    1.网络基础 TCP/IP 1.1TCP /IP 协议族   计算机与网络设备要相互通信,双方就必须基于相同的方法.比如,如何探测到通信目标.由哪一边先发起通信.使用哪种语言进行通信.怎样结束通信等规 ...

  10. docker安装及基本命令

    Ubuntu安装docker sudo apt-get install docker.io Centos安装docker # 更新系统软件包 yum -y upgrade # 官方下载地址 curl ...