super — Keyword · JavaScript-Referenz

Signatur

super(...args) / super.property / super[expression]

Beschreibung

Das Schlüsselwort super kommt in zwei Formen vor. Der Konstruktoraufruf super(...args) ist nur im Konstruktor einer abgeleiteten Klasse (class B extends A) erlaubt. Er ruft den Konstruktor der Oberklasse auf und initialisiert dabei this. Vor diesem Aufruf gibt es in abgeleiteten Klassen kein this. Wer vorher darauf zugreift, bekommt einen ReferenceError.

Der Eigenschaftszugriff super.name bzw. super[ausdruck] funktioniert in allen Methoden von Klassen und Objekt-Literalen, also auch in statischen Methoden, Gettern, Settern und Klassenfeldern. Die Suche nach der Eigenschaft beginnt beim [[Prototype]] des Objekts, in dem die Methode definiert wurde (dem sogenannten HomeObject). Damit lässt sich eine überschriebene Methode erweitern, statt sie komplett neu zu schreiben, zum Beispiel mit super.toString().

Beim Aufruf super.methode() bleibt this das aktuelle Objekt und nicht der Prototyp. In statischen Methoden zeigt super auf die Oberklasse selbst, sodass man statische Methoden der Elternklasse aufrufen kann.

super ist kein eigenständiger Wert. Ein alleinstehendes super (etwa console.log(super)) ist ein Syntaxfehler.

Parameter

Name	Typ	Default	Beschreibung
$...args	any		Nur bei `super(...)`: Argumente, die an den Konstruktor der Oberklasse übergeben werden.
$property	string \| symbol		Nur bei `super.property` / `super[expression]`: Name der Eigenschaft oder Methode, die ab dem Prototyp des HomeObjects gesucht wird.

Rückgabewert

Typ

undefined | any

Beschreibung

super(...) liefert this (die initialisierte Instanz) und bindet es gleichzeitig. super.prop liefert den Wert der gefundenen Eigenschaft oder undefined.

Beispiele

Oberklassen-Konstruktor aufrufen

class Fahrzeug {
  constructor(marke) {
    this.marke = marke;
  }
}

class Auto extends Fahrzeug {
  constructor(marke, tueren) {
    super(marke); // muss vor jedem Zugriff auf this stehen
    this.tueren = tueren;
  }
}

const a = new Auto('VW', 5);
console.log(a.marke, a.tueren);

VW 5

Überschriebene Methode erweitern

class Logger {
  format(msg) {
    return `[LOG] ${msg}`;
  }
}

class ZeitLogger extends Logger {
  format(msg) {
    // Ergebnis der Elternmethode wiederverwenden
    return `${new Date(0).toISOString()} ${super.format(msg)}`;
  }
}

console.log(new ZeitLogger().format('Start'));

1970-01-01T00:00:00.000Z [LOG] Start

Eigene Fehlerklasse und statisches super

class HttpError extends Error {
  constructor(status, message) {
    super(message); // setzt message über den Error-Konstruktor
    this.name = 'HttpError';
    this.status = status;
  }
  static fromResponse(res) {
    return new this(res.status, res.statusText);
  }
}

class NotFoundError extends HttpError {
  static fromResponse(res) {
    const err = super.fromResponse(res); // statische Methode der Oberklasse
    err.hint = 'URL prüfen';
    return err;
  }
}

const e = NotFoundError.fromResponse({ status: 404, statusText: 'Not Found' });
console.log(e instanceof NotFoundError, e.status, e.message, e.hint);

true 404 Not Found URL prüfen

super in Objekt-Literalen

const basis = {
  gruss() {
    return 'Hallo';
  }
};

const person = {
  __proto__: basis,
  gruss() {
    return `${super.gruss()}, Welt!`;
  }
};

console.log(person.gruss());

Hallo, Welt!

// Wichtig · Fallstricke

this vor super(): Wer in einem abgeleiteten Konstruktor vor super() auf this zugreift, löst einen ReferenceError aus. Dasselbe passiert, wenn der Konstruktor endet, ohne super() aufzurufen, es sei denn, er gibt explizit ein Objekt zurück. Ein zweiter Aufruf von super() wirft ebenfalls einen ReferenceError.
Nur in Methodensyntax: super.prop funktioniert nur in Kurzschreibweise (methode() {}), nicht in Eigenschaften der Form methode: function() {}. Dort gibt es einen SyntaxError.
Statische Bindung: Das HomeObject wird bei der Definition festgelegt. Wird eine Methode auf ein anderes Objekt kopiert, zeigt super weiterhin auf den ursprünglichen Prototyp.
Pfeilfunktionen haben kein eigenes super. Sie übernehmen es aus der umgebenden Methode, was etwa in Callbacks praktisch ist.
super.x = wert schreibt auf this, nicht auf den Prototyp.
Wird kein eigener Konstruktor definiert, erzeugt die Sprache automatisch constructor(...args) { super(...args); }.
Kompatibilität: wird von allen modernen Browsern und Node.js 6+ unterstützt, nicht vom Internet Explorer.

Siehe auch

class extends this static Object.setPrototypeOf() import.defer()