Klasse in JavaScript erweitern

Klassen sind eine Vorlage oder Blaupause zum Erstellen von Objekten. Sie können Daten mit Code kapseln, um mit diesen Daten zu arbeiten.

Klassen in JS basieren auf Prototypen, aber sie haben auch Syntax und Semantik, die nicht mit der Klassensemantik von ES5 geteilt werden.

Im heutigen Beitrag lernen wir, die Klasse in JavaScript zu erweitern.

Erweitern Sie die Klasse in JavaScript mit dem Schlüsselwort extends

Das Schlüsselwort extends kann benutzerdefinierte Klassen und eingebaute Objekte von den Hauptklassen ableiten. Es wird in Klassenausdrücken oder Klassendeklarationen verwendet, um eine Klasse zu erstellen, die ein Kind einer anderen Klasse ist.

Syntax:

class ChildClass extends ParentClass { /* Logic goes here */
}

Weitere Informationen zu extends finden Sie in der Dokumentation hier.

Zum Beispiel haben wir eine ParentClass, die aus der Namenseigenschaft der übergeordneten Klasse und einem Zähler besteht, der den Zahlenwert speichert. ParentClass enthält auch eine statische Methode, die die aktuelle Instanz der Namenseigenschaft der übergeordneten Klasse anzeigt.

ChildClass erweitert die Eigenschaften von ParentClass. Durch Erweitern der Elternklasse kann die Kindklasse auf jede Eigenschaft der Elternklasse zugreifen.

Das reservierte Schlüsselwort super kann Superkonstruktoraufrufe ausführen und bietet Zugriff auf die übergeordneten Methoden.

Beispiel:

class ParentClass {
  constructor(counter) {
    this.name = 'ParentClass';
    this.counter = counter;
  }
  sayClassName() {
    console.log('Hi, I am a ', this.name + '.');
  }
}

const parent = new ParentClass(300);
parent.sayClassName();
console.log('The counter of this parent class is ' + parent.counter);

class ChildClass extends ParentClass {
  constructor(counter) {
    super(counter);
    this.name = 'ChildClass';
  }

  get counter() {
    return this.counter;
  }
  set counter(value) {
    this.childCounter = value;
  }
}

const child = new ChildClass(5);

child.sayClassName();
console.log('The counter of this parent class is ' + child.childCounter);

Wir haben eine übergeordnete Klasseninstanz erstellt, die den Zähler auf 300 setzt. Sobald die untergeordnete Klasse generiert wird, aktualisiert sie den Zähler auf 5.

Die untergeordnete Klasse hat keine Zählereigenschaft. Es wird von der Elternklasse geerbt.

Ausgang:

"Hi, I am a ", "ParentClass."
"The counter of this parent class is 300"
"Hi, I am a ", "ChildClass."
"The counter of this parent class is 5"

Sie können auch hier auf den vollständigen Code des Beispiels zugreifen.