Vererbung ist ein zentrales Konzept in der objektorientierten Programmierung, das es dir ermöglicht, bestehende Klassen zu erweitern und deren Eigenschaften sowie Methoden zu nutzen. JavaScript hat mit der Einführung von ES6 eine neuere und robustere Syntax der Vererbung eingeführt, die weit einfacher zu handhaben ist als die ursprünglichen Prototype-Methoden. In diesem Leitfaden werde ich dir zeigen, wie du die Vererbung in JavaScript mithilfe des Keywords extends anwendest, und dir Schritt für Schritt erklären, wie du den Konstruktor der Basisklasse mit super korrekt aufrufst.
Wichtigste Erkenntnisse
- Die Vererbung in JavaScript erfolgt durch das extends-Keyword.
- Der Konstruktor der Basisklasse muss mit super aufgerufen werden.
- Instanzvariablen können durch das Schlüsselwort this in der abgeleiteten Klasse referenziert werden.
Schritt-für-Schritt-Anleitung
Erstellen der Basisklasse
Um mit der Vererbung zu beginnen, erstellen wir zunächst eine Basisklasse namens Shape. In dieser Klasse definieren wir den Konstruktor sowie einige Methoden.
Hier definierst du eine Klasse Shape, die einen Konstruktor hat. Du kannst in diesem Konstruktor Variablen und Funktionen definieren, auf die andere Klassen zugreifen können.
Erkunden der Subklasse
Nach der Erstellung der Basisklasse kannst du nun eine Subklasse erstellen, die von Shape erbt. In diesem Beispiel nennen wir die neue Klasse ConcreteShape.
In dieser Subklasse verwenden wir das extends-Keyword, um anzugeben, dass ConcreteShape von Shape erbt. Der Konstruktor der Subklasse ruft den Konstruktor der Basisklasse Shape mit super() auf, was notwendig ist, um die Vererbung korrekt zu implementieren.
Instanziierung der Subklasse
Jetzt, da wir die Subklasse erstellt haben, ist es an der Zeit, eine Instanz dieser Klasse zu erzeugen.
Hier erzeugst du ein neues Objekt myShape der Klasse ConcreteShape und übergibst eine Beschreibung an den Konstruktor. Dann rufst du die print-Methode auf, die die Beschreibung ausgibt.
Hinzufügen weiterer Eigenschaften
Du kannst deiner Subklasse weitere Eigenschaften hinzufügen oder sogar Methoden, die spezifisch für diese Subklasse sind.
Hier hast du die ConcreteShape-Klasse erweitert, indem du zusätzliche Parameter zum Konstruktor hinzugefügt hast.
Nutzung der Vererbung
Mit dem super-Keyword kannst du die Methode describe der Basisklasse aufrufen, um die Eigenschaften der Basisklasse und der Subklasse zu kombinieren.
Zusammenfassung – Vererbung in JavaScript: Von ES6 zu ES13
In diesem Tutorial hast du gelernt, wie die Vererbung in JavaScript funktioniert, insbesondere mit der neuen class-Syntax. Du hast gesehen, wie du Klassen definierst, wie du von einer Basisklasse erben und wie du den Konstruktor korrekt aufrufst. Diese Mechanismen machen es dir leichter, deine Codebasis sauber und wartbar zu halten, indem du Features effizient wiederverwendest.
Häufig gestellte Fragen
Was ist der Unterschied zwischen super() und this?super() wird verwendet, um den Konstruktor der Basisklasse aufzurufen, während this auf die Instanz der aktuellen Klasse zugreift.
Warum ist die Verwendung von Es6-Klassen besser als Prototypen?Die ES6-Klassen bieten eine klarere und intuitivere Syntax, die das Lesen und Verstehen des Codes erleichtert.
Kann ich mehrere Basisklassen haben?Nein, JavaScript unterstützt keine Mehrfachvererbung. Eine Klasse kann nur von einer anderen Klasse erben.
Was passiert, wenn ich super() nicht aufrufe?Wenn du super() nicht aufrufst, erhältst du einen Fehler, da der Basisklassenkonstruktor, der initialisiert, was für die Klasse notwendig ist, nicht ausgeführt wird.
