Detailed explanation of super keyword in ES6 Class

I have collected and organized the super keyword in ES6 Class. This article will be shared with everyone. It is very good and has reference value. Friends who need it can refer to it. I hope it can help everyone.

The following are just personal study notes:

The super keyword can be used as either a function or an object. In both cases, its usage is completely different.

1. Use it as a function

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

Note that although super represents the constructor of parent class A, the returned It is an instance of subclass B, that is, this inside super refers to B, so super() is equivalent to A.prototype.constructor.call(this) here.

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

You can see that when super() is executed, it points to the constructor of subclass B, not the constructor of parent class A. In other words, this inside super() points to B.

2. Use it as an object

In ordinary methods, it points to the prototype object of the parent class; in static methods, it points to the parent class.

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

In the above code, super.c() in subclass B uses super as an object. At this time, super points to A.prototype in the ordinary method, so super.c() is equivalent to A.prototype.c().

When calling the method of the parent class through super, super will bind this of the subclass.

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

In the above code, although super.s() calls A.prototype.s(), A.prototype.s() will bind the subclass B's this causes the output to be 2, not 1. In other words, what is actually executed is super.s.call(this).

Since this is bound to the subclass, if a property is assigned a value through super, then super is this, and the assigned property will become the property of the subclass instance.

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();

In the above code, super.x is assigned a value of 3, which is equivalent to assigning a value of 3 to this.x. When reading super.x, A.prototype.x is read, so undefined is returned.

Note that when using super, you must explicitly specify whether to use it as a function or an object, otherwise an error will be reported.

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

In the above code, the super in console.log(super) cannot be seen whether it is used as a function or as an object, so when the JavaScript engine parses the code An error will be reported. At this time, if the data type of super can be clearly stated, no error will be reported.

Finally, since objects always inherit other objects, you can use the super keyword in any object.

Related recommendations:

Detailed explanation of Laravel's method of implementing supervisor to execute asynchronous processes

Detailed explanation of the super() function in python Usage and working principle

Super calling details in multiple inheritance

The above is the detailed content of Detailed explanation of super keyword in ES6 Class. For more information, please follow other related articles on the PHP Chinese website!