super

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

Note: super ist ein Schlüsselwort und diese sind spezielle syntaktische Konstrukte. super ist keine Variable, die auf das Prototyp-Objekt zeigt. Der Versuch, super selbst zu lesen, führt zu einem SyntaxError.

js

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

Im Konstruktor einer abgeleiteten Klasse (mit extends) kann das super Schlüsselwort als "Funktionsaufruf" (super(...args)) erscheinen, der vor der Verwendung des this-Schlüsselworts und vor der Rückgabe des Konstruktors aufgerufen werden muss. Es ruft den Konstruktor der Elternklasse auf und bindet die öffentlichen Felder der Elternklasse, danach kann der Konstruktor der abgeleiteten Klasse weiter auf this zugreifen und es modifizieren.

Die "Eigenschaftsabruf"-Form kann verwendet werden, um Methoden und Eigenschaften des [[Prototyps]] eines Objekt-Literals oder einer Klasse zuzugreifen. Innerhalb des Körper einer Klasse kann die Referenz von super entweder der Konstruktor der Elternklasse selbst oder das prototype des Konstruktors sein, abhängig davon, ob der Ausführungskontext Instanzerstellung oder Klasseninitialisierung ist. Siehe den Abschnitt Beispiele für weitere Details.

Beachten Sie, dass die Referenz von super durch die Klasse oder das Objekt-Literal bestimmt wird, in dem super deklariert wurde, und nicht durch das Objekt, auf dem die Methode aufgerufen wird. Daher ändert das Unbinden oder erneute Binden einer Methode nicht die Referenz von super darin (obwohl sie die Referenz von this ändern). Sie können super als eine Variable im Gültigkeitsbereich der Klasse oder des Objekt-Literals sehen, über die die Methoden eine Closure erstellen. (Aber beachten Sie auch, dass es eigentlich keine Variable ist, wie oben erklärt.)

Beim Setzen von Eigenschaften durch super wird die Eigenschaft auf this gesetzt.

Dieser Code-Schnipsel stammt aus dem Klassenbeispiel (Live-Demo). Hier wird super() aufgerufen, um die duplizierten Teile des Konstruktors 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 statischen Methoden aufrufen.

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 von Klassenfeldern aufgerufen 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 und nicht auf dem prototype des Konstruktors gesetzt werden, sodass Sie super nicht verwenden können, um auf das Instanzfeld einer Oberklasse zuzugreifen.

class Base {
  baseField = 10;
}

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

Hier ist extendedField stattdessen undefined, weil baseField als eigene Eigenschaft der Base-Instanz definiert ist und nicht Base.prototype. super sucht in diesem Zusammenhang nur nach Eigenschaften auf Base.prototype, weil das der [[Prototyp]] von Extended.prototype ist.

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

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 Objektinitialisierungsnotation verwendet werden. In diesem Beispiel definieren zwei Objekte eine Methode. Im zweiten Objekt ruft super die Methode des ersten Objekts auf. Dies funktioniert mit Hilfe von Object.setPrototypeOf(), mit dem wir in der Lage sind, den 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 am Prototyp des Objekt-Literal/Klassendeklaration gesucht wird, und das Unbinden und erneute Binden einer Methode wird die Referenz von super nicht ändern.

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

Das Gleiche passiert in Objekt-Literals.

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 ändert die Referenz von super.

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 Aufrufen von super.prop als Funktion ist der this-Wert innerhalb der prop-Funktion das aktuelle this, nicht das Objekt, auf das super zeigt. Zum Beispiel protokolliert der super.getName()-Aufruf "Extended", obwohl der Code so aussieht, als wäre er äquivalent zu 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 beim Interagieren mit statischen privaten Eigenschaften.

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 einfach "Referenz des Prototyp-Objekts" nicht ausreicht, weil 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, welches in diesem Kontext b ist. Weitere Details zu dem Fall, wenn target und receiver voneinander abweichen, finden Sie unter Reflect.set.

Das bedeutet, dass obwohl Methoden, die super.prop abrufen, 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 konsultiert super.x = 1 immer noch den Eigenschaftsdeskriptor des Prototyp-Objekts, was bedeutet, dass Sie nicht in der Lage sind, nicht schreibbare Eigenschaften neu zu schreiben, und Setter werden aufgerufen.

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