What is the usage of super in es6

Usage of super: 1. When super is used as a function, it is used to represent the constructor of the parent class. The syntax is "constructor(){super();}"; 2. When super is used as an object, it is used in ordinary methods. is used to point to the prototype object of the parent class, and is used to point to the parent class in static methods.

The operating environment of this tutorial: Windows 10 system, ECMAScript version 6.0, Dell G3 computer.

What is the usage of super in es6

The first case: when super is used as a function, it represents the constructor of the parent class

ES6 requirements, The constructor of the subclass must execute the super function once

class A {}
class B extends A {
  constructor() {
    super();//子类的构造函数，必须执行一次super函数，代表父类的构造函数
  }
}

Note: Although super represents the constructor of the parent class, the instance returned at this time is the instance of B, that is, this inside super refers to the instance of B , so super() is equivalent to A.prototype.constructor.call(this)

class A {
  constructor() {
    console.log(new.target.name);
  }
}
class B extends A {
  constructor() {
    super();
  }
}
new A() // A
new B() // B

In the above code, new.target points to the currently executing function. When super() is executed, it points to the child The constructor of class B, not the constructor of parent class A. That is to say, this inside super() points to B

When super is used as a function, it must appear in the constructor of the subclass, otherwise An error will be reported

class A {}
class B extends A {
  m() {
    super(); // 报错
  }
}

The second case: when super is used as an object, in ordinary methods, it points to the prototype object of the parent class, and in static methods, it points to the parent class

class A {
  p() {
    return 2;
  }
}
class B extends A {
  constructor() {
    super();//父类的构造函数
    console.log(super.p()); // 2
  }
}
let b = new B();

In the above code, when super is used as a function, it represents the construction method of the parent class. When used as an object, it points to the prototype object of the parent class, that is, A.prototype, so super.p() is equivalent to A.prototype.p()

It should also be noted here that since super points to the prototype of the parent class, the properties or methods on the parent class instance cannot be called through super

class A {
  constructor() {
    this.p = 2;
  }
}
class B extends A {
  get m() {
    return super.p;
  }
}
let b = new B();
b.m // undefined

In the above code, p is the parent class A The attributes of the instance cannot be referenced by super.p

If the attribute is defined on the prototype of the parent class, it can be accessed using super

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

In the above code, attribute x is defined On the prototype object of the parent class, you can use super.x to access

[Related recommendations: javascript video tutorial, web front-end]

The above is the detailed content of What is the usage of super in es6. For more information, please follow other related articles on the PHP Chinese website!