HOWTO · JavaScript

Klasse in JavaScript erweitern

In diesem Tutorial lernen wir, die Klasse in JavaScript zu erweitern.

Von ShraddhaVeröffentlicht 2023-06-20Aktualisiert 2023-10-12

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.

Über den Autor

Shraddha Paghdar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

Autorenprofil ansehen
LinkedIn