Detaillierte Erklärung des Super-Schlüsselworts in der ES6-Klasse

Das Super-Schlüsselwort in der ES6-Klasse wurde gesammelt und mit allen geteilt. Es ist sehr gut und hat einen Referenzwert. Ich hoffe, es kann jedem helfen.

Das Folgende sind nur persönliche Lernnotizen:

Das Schlüsselwort super kann entweder als Funktion oder als Objekt verwendet werden. In beiden Fällen ist die Verwendung völlig unterschiedlich.

1. Verwenden Sie es als Funktion

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

Beachten Sie, dass Super den Konstruktor der übergeordneten Klasse A darstellt zurückgegeben wird, ist eine Instanz der Unterklasse B, das heißt, this inside super bezieht sich auf B, daher entspricht super() hier 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

Sie können sehen, dass super() bei der Ausführung auf den Konstruktor der Unterklasse B zeigt, nicht auf den Konstruktor der übergeordneten Klasse A. Mit anderen Worten, dieses Innere von super() zeigt auf B.

2. Verwenden Sie es als Objekt

In gewöhnlichen Methoden zeigt es auf das Prototypobjekt der übergeordneten Klasse; in statischen Methoden zeigt es auf die übergeordnete Klasse .

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

Im obigen Code verwendet super.c() in Unterklasse B super als Objekt. Zu diesem Zeitpunkt zeigt super in der normalen Methode auf A.prototype, sodass super.c() äquivalent zu A.prototype.c() ist.

Wenn die Methode der übergeordneten Klasse über super aufgerufen wird, bindet super diese der Unterklasse.

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

Obwohl super.s() im obigen Code A.prototype.s() aufruft, bindet A.prototype.s() dies der Unterklasse B bewirkt, dass die Ausgabe 2 statt 1 ist. Mit anderen Worten, was tatsächlich ausgeführt wird, ist super.s.call(this).

Da dies an die Unterklasse gebunden ist und einer Eigenschaft über super ein Wert zugewiesen wird, ist super dies und die zugewiesene Eigenschaft wird zur Eigenschaft der Unterklasseninstanz.

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

Im obigen Code wird super.x ein Wert von 3 zugewiesen, was der Zuweisung eines Werts von 3 zu this.x entspricht. Beim Lesen von super.x wird A.prototype.x gelesen, sodass undefiniert zurückgegeben wird.

Beachten Sie, dass Sie bei der Verwendung von super explizit angeben müssen, ob Sie es als Funktion oder als Objekt verwenden möchten, andernfalls wird ein Fehler gemeldet.

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

Im obigen Code kann das Super in console.log(super) nicht gesehen werden, ob es als Funktion oder als Objekt verwendet wird, also das JavaScript Wenn die Engine den Code analysiert, wird ein Fehler gemeldet. Wenn zu diesem Zeitpunkt der Datentyp Super eindeutig angegeben werden kann, wird kein Fehler gemeldet.

Da Objekte schließlich immer andere Objekte erben, können Sie das Schlüsselwort super in jedem Objekt verwenden.

Verwandte Empfehlungen:

Detaillierte Erläuterung der Methode von Laravel zur Implementierung von Supervisor zur Ausführung asynchroner Prozesse

Detaillierte Erläuterung des Super ()-Funktion in Python Verwendung und Funktionsprinzip

Details zum Aufruf von Super bei Mehrfachvererbung

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des Super-Schlüsselworts in der ES6-Klasse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!