super

Das Schlüsselwort super kann auf zwei Arten verwendet werden: als "Funktionsaufruf" (super(...args)) oder als "Eigenschaftslook-up" (super.prop und super[expr]).

const child = {
  myParent() {
    console.log(super); // SyntaxError: 'super' keyword unexpected here
  },
};

Im Konstruktor-Körper einer abgeleiteten Klasse (mit extends) kann das super Schlüsselwort als "Funktionsaufruf" (super(...args)) erscheinen. Es muss aufgerufen werden, bevor das this Schlüsselwort verwendet wird und bevor der Konstruktor zurückkehrt. Es ruft den Konstruktor der Elternklasse auf und bindet deren öffentliche Felder, wonach der Konstruktor der abgeleiteten Klasse weiter auf this zugreifen und es modifizieren kann.

Die "Eigenschaftslook-up"-Form kann verwendet werden, um Methoden und Eigenschaften des Prototyps eines Objekt-Literals oder einer Klasse zuzugreifen. Im Körper einer Klasse kann die Referenz von super entweder der Konstruktor der Superklasse selbst oder das prototype des Konstruktors sein, je nachdem, ob der Ausführungskontext die Instanzerstellung oder die Klasseninitialisierung ist. Weitere Details finden Sie im Abschnitt Beispiele.

Beachten Sie, dass die Referenz von super durch die Klasse oder das Objekt-Literal bestimmt wird, in dem super deklariert wurde, nicht das Objekt, auf dem die Methode aufgerufen wird. Daher ändert das Entbinden oder Neu-Binden einer Methode nicht die Referenz von super darin (obwohl sie die Referenz von this ändern). Sie können super als Variable im Klassen- oder Objekt-Literal-Bereich ansehen, über den die Methoden eine Schließung erstellen. (Aber achten Sie darauf, dass es tatsächlich keine Variable ist, wie oben erklärt.)

Beim Setzen von Eigenschaften über super wird die Eigenschaft stattdessen auf this gesetzt.

Dieser Code-Schnipsel stammt aus dem Klassensample (Live-Demo). Hier wird super() aufgerufen, um die Konstruktor-Teile zu vermeiden, die zwischen Rectangle und Square gemeinsam sind.

class Rectangle {
  constructor(height, width) {
    this.name = "Rectangle";
    this.height = height;
    this.width = width;
  }
  sayName() {
    console.log(`Hi, I am a ${this.name}.`);
  }
  get area() {
    return this.height * this.width;
  }
  set area(value) {
    this._area = value;
  }
}

class Square extends Rectangle {
  constructor(length) {
    // Here, it calls the parent class's constructor with lengths
    // provided for the Rectangle's width and height
    super(length, length);

    // Note: In derived classes, super() must be called before you
    // can use 'this'. Moving this to the top causes a ReferenceError.
    this.name = "Square";
  }
}

Sie können auch super auf statische Methoden anwenden.

class Rectangle {
  static logNbSides() {
    return "I have 4 sides";
  }
}

class Square extends Rectangle {
  static logDescription() {
    return `${super.logNbSides()} which are all equal`;
  }
}
Square.logDescription(); // 'I have 4 sides which are all equal'

super kann auch während der Initialisierung eines Klassenfeldes zugegriffen werden. Die Referenz von super hängt davon ab, ob das aktuelle Feld ein Instanzfeld oder ein statisches Feld ist.

class Base {
  static baseStaticField = 90;
  baseMethod() {
    return 10;
  }
}

class Extended extends Base {
  extendedField = super.baseMethod(); // 10
  static extendedStaticField = super.baseStaticField; // 90
}

Beachten Sie, dass Instanzfelder auf der Instanz anstatt des prototype des Konstruktors gesetzt werden, sodass Sie super nicht verwenden können, um auf das Instanzfeld einer Superklasse zuzugreifen.

class Base {
  baseField = 10;
}

class Extended extends Base {
  extendedField = super.baseField; // undefined
}

Hier ist extendedField undefined statt 10, weil baseField als eigene Eigenschaft der Base Instanz definiert ist, anstatt Base.prototype. super, in diesem Kontext, schaut nur nach Eigenschaften auf Base.prototype, da dies der [[Prototype]] von Extended.prototype ist.

Sie können den delete Operator und super.prop oder super[expr] nicht verwenden, um eine Eigenschaft der Elternklasse zu löschen — es wird einen ReferenceError auslösen.

class Base {
  foo() {}
}
class Derived extends Base {
  delete() {
    delete super.foo; // this is bad
  }
}

new Derived().delete(); // ReferenceError: invalid delete involving 'super'.

Super kann auch in der Objektinitialisierungs-Notation verwendet werden. In diesem Beispiel definieren zwei Objekte eine Methode. Im zweiten Objekt ruft super die Methode des ersten Objekts auf. Dies funktioniert mit der Hilfe von Object.setPrototypeOf(), mit welchem wir in der Lage sind, das Prototyp von obj2 auf obj1 zu setzen, sodass super in der Lage ist, method1 auf obj1 zu finden.

const obj1 = {
  method1() {
    console.log("method 1");
  },
};

const obj2 = {
  method2() {
    super.method1();
  },
};

Object.setPrototypeOf(obj2, obj1);
obj2.method2(); // Logs "method 1"

Der Zugriff auf super.x verhält sich wie Reflect.get(Object.getPrototypeOf(objectLiteral), "x", this), was bedeutet, dass die Eigenschaft immer auf dem Prototyp des Objekt-Literals/Klassen-Deklaration gesucht wird, und das Entbinden und Neu-Binden einer Methode die Referenz von super nicht ändert.

class Base {
  baseGetX() {
    return 1;
  }
}
class Extended extends Base {
  getX() {
    return super.baseGetX();
  }
}

const e = new Extended();
console.log(e.getX()); // 1
const { getX } = e;
console.log(getX()); // 1

Dasselbe passiert in Objekt-Literalen.

const parent1 = { prop: 1 };
const parent2 = { prop: 2 };

const child = {
  myParent() {
    console.log(super.prop);
  },
};

Object.setPrototypeOf(child, parent1);
child.myParent(); // Logs "1"

const myParent = child.myParent;
myParent(); // Still logs "1"

const anotherChild = { __proto__: parent2, myParent };
anotherChild.myParent(); // Still logs "1"

Nur das Zurücksetzen der gesamten Vererbungskette wird die Referenz von super ändern.

class Base {
  baseGetX() {
    return 1;
  }
  static staticBaseGetX() {
    return 3;
  }
}
class AnotherBase {
  baseGetX() {
    return 2;
  }
  static staticBaseGetX() {
    return 4;
  }
}
class Extended extends Base {
  getX() {
    return super.baseGetX();
  }
  static staticGetX() {
    return super.staticBaseGetX();
  }
}

const e = new Extended();
// Reset instance inheritance
Object.setPrototypeOf(Extended.prototype, AnotherBase.prototype);
console.log(e.getX()); // Logs "2" instead of "1", because the prototype chain has changed
console.log(Extended.staticGetX()); // Still logs "3", because we haven't modified the static part yet
// Reset static inheritance
Object.setPrototypeOf(Extended, AnotherBase);
console.log(Extended.staticGetX()); // Now logs "4"

Beim Aufruf von super.prop als Funktion ist der this-Wert in der prop-Funktion das aktuelle this, nicht das Objekt, auf das super zeigt. Zum Beispiel protokolliert der Aufruf super.getName() "Extended", obwohl der Code so aussieht, als wäre er gleichwertig mit Base.getName().

class Base {
  static getName() {
    console.log(this.name);
  }
}

class Extended extends Base {
  static getName() {
    super.getName();
  }
}

Extended.getName(); // Logs "Extended"

Dies ist besonders wichtig, wenn man mit statischen privaten Eigenschaften interagiert.

Das Setzen von Eigenschaften von super, wie super.x = 1, verhält sich wie Reflect.set(Object.getPrototypeOf(objectLiteral), "x", 1, this). Dies ist einer der Fälle, in denen das Verständnis von super als einfache "Referenz des Prototyp-Objekts" versagt, da es tatsächlich die Eigenschaft auf this setzt.

class A {}
class B extends A {
  setX() {
    super.x = 1;
  }
}

const b = new B();
b.setX();
console.log(b); // B { x: 1 }
console.log(Object.hasOwn(b, "x")); // true

super.x = 1 wird den Eigenschaftsdeskriptor von x auf A.prototype suchen (und die dort definierten Setter aufrufen), aber der this-Wert wird auf this gesetzt, was in diesem Kontext b ist. Sie können Reflect.set lesen, um mehr über den Fall zu erfahren, wenn sich target und receiver unterscheiden.

Das bedeutet, dass während Methoden, die super.prop auslesen, normalerweise nicht anfällig für Änderungen im this-Kontext sind, diejenigen, die super.prop setzen, es sind.

/* Reusing same declarations as above */

const b2 = new B();
b2.setX.call(null); // TypeError: Cannot assign to read only property 'x' of object 'null'

Jedoch wird super.x = 1 weiterhin den Eigenschaftsdeskriptor des Prototyp-Objekts konsultieren, was bedeutet, dass Sie nicht schreibgeschützte Eigenschaften überschreiben können und Setter aufgerufen werden.

class X {
  constructor() {
    // Create a non-writable property
    Object.defineProperty(this, "prop", {
      configurable: true,
      writable: false,
      value: 1,
    });
  }
}

class Y extends X {
  constructor() {
    super();
  }
  foo() {
    super.prop = 2; // Cannot overwrite the value.
  }
}

const y = new Y();
y.foo(); // TypeError: "prop" is read-only
console.log(y.prop); // 1

• Klassen