Kursinhalt
Fortgeschrittene JavaScript-Meisterschaft
Fortgeschrittene JavaScript-Meisterschaft
Vererbung mit Extends und Verwendung von Super()
Was ist Klassenvererbung?
JavaScript verwendet das Schlüsselwort extends, um diese Beziehung zwischen Klassen herzustellen. Eine Kindklasse kann ihre eigenen Eigenschaften und Methoden hinzufügen oder die der Elternklasse überschreiben.
Stellen Sie sich eine Kindklasse als eine spezialisierte Version der Elternklasse vor. Wenn die Elternklasse ein Bauplan für ein Auto ist, könnte die Kindklasse einen bestimmten Autotyp darstellen, wie ein Elektroauto. Das Elektroauto erbt die grundlegende Funktionalität (Räder, Lenkung), kann aber Funktionen hinzufügen oder ändern (Batterie, Ladesystem).
Wie man das extends Schlüsselwort verwendet
Das extends Schlüsselwort wird verwendet, um eine Klasse von einer anderen Klasse erben zu lassen. Die Kindklasse erbt alle Eigenschaften und Methoden der Elternklasse.
class Animal { constructor(name) { this.name = name; } makeSound() { console.log(`${this.name} makes a sound.`); } } // Child class extending the Animal class class Dog extends Animal { bark() { console.log(`${this.name} barks!`); } } const dog = new Dog('Rex'); dog.makeSound(); // Output: Rex makes a sound. dog.bark(); // Output: Rex barks!
In diesem Beispiel erweitert die Dog Klasse die Animal Klasse und erbt die makeSound() Methode von der Elternklasse. Die Dog Klasse fügt auch ihre eigene bark() Methode hinzu.
Arbeiten mit dem Konstruktor in einer Kindklasse
Wenn Sie eine Kindklasse erstellen, muss diese oft sowohl ihre eigenen Eigenschaften als auch die der Elternklasse initialisieren. Dies geschieht über die constructor-Methode. Um jedoch sicherzustellen, dass die Elternklasse ordnungsgemäß initialisiert wird, müssen Sie die super()-Funktion verwenden, um den Konstruktor der Elternklasse aufzurufen.
Wichtig: Wenn eine Kindklasse einen Konstruktor hat, muss sie super() aufrufen, bevor sie auf this zugreift, sonst tritt ein Fehler auf.
Verwendung von super() zum Aufrufen des Konstruktors der Elternklasse
Die super()-Funktion wird verwendet, um den Konstruktor der Elternklasse aus dem Konstruktor der Kindklasse aufzurufen. Dies stellt sicher, dass alle im Konstruktor der Elternklasse definierten Eigenschaften oder Logiken korrekt initialisiert werden, bevor neue Funktionalitäten in der Kindklasse hinzugefügt werden.
class Animal { constructor(name) { this.name = name; } makeSound() { console.log(`${this.name} makes a sound.`); } } // Child class with its own constructor class Dog extends Animal { constructor(name, breed) { // Call the parent class constructor using super() super(name); this.breed = breed; } bark() { console.log(`${this.name}, the ${this.breed}, barks!`); } } const dog = new Dog('Rex', 'German Shepherd'); dog.makeSound(); // Output: Rex makes a sound. dog.bark(); // Output: Rex, the German Shepherd, barks!
In diesem Beispiel haben wir eine Basisklasse namens Animal mit einem Konstruktor, der die Eigenschaft name initialisiert, und einer Methode makeSound, die eine generische Klangnachricht protokolliert. Die Dog-Klasse erweitert Animal und fügt ihren eigenen Konstruktor hinzu, der sowohl name als auch breed als Argumente akzeptiert. Im Dog-Konstruktor wird die super()-Funktion verwendet, um den Konstruktor der Elternklasse aufzurufen und sicherzustellen, dass name korrekt gesetzt wird. Zusätzlich führt Dog eine neue Methode bark ein, die eine Nachricht protokolliert, die spezifisch für die Rasse des Hundes ist. Wenn wir eine neue Dog-Instanz namens Rex der Rasse German Shepherd erstellen, können wir sowohl makeSound als auch bark aufrufen, um das geerbte und neue Verhalten zu demonstrieren.
Wichtige Punkte bei der Verwendung von extends und super()
Vererbung: Das Schlüsselwort extends ermöglicht es der Kindklasse, Eigenschaften und Methoden von der Elternklasse zu erben.
Konstruktor in der Kindklasse: Beim Definieren eines Konstruktors in der Kindklasse immer super() verwenden, um den Konstruktor der Elternklasse aufzurufen.
Zugriff auf this: Sie müssen super() aufrufen, bevor Sie im Konstruktor der Kindklasse auf this zugreifen.
Methodenüberschreibung: Sie können Methoden der Elternklasse in der Kindklasse überschreiben, indem Sie eine Methode mit demselben Namen definieren. Sie können auch super.methodName() verwenden, um die Methode der Elternklasse innerhalb der Kindklasse aufzurufen, falls erforderlich.
Beispiel: Methoden überschreiben und super() verwenden
Manchmal möchten Sie eine Methode der Elternklasse in der Kindklasse überschreiben, aber dennoch die Methode der Elternklasse als Teil der neuen Logik aufrufen. Dies können Sie mit super.methodName() tun.
class Animal { constructor(name) { this.name = name; } makeSound() { console.log(`${this.name} makes a generic sound.`); } } class Dog extends Animal { constructor(name, breed) { super(name); this.breed = breed; } // Override the makeSound method makeSound() { // Call the parent class's makeSound method super.makeSound(); console.log(`${this.name}, the ${this.breed}, barks loudly.`); } } const dog = new Dog('Rex', 'German Shepherd'); dog.makeSound(); // Output: // Rex makes a generic sound. // Rex, the German Shepherd, barks loudly.
In diesem Beispiel überschreibt die Dog-Klasse die makeSound-Methode, ruft aber dennoch die makeSound-Methode der Elternklasse mit super.makeSound() auf. Dies ermöglicht es der Kindklasse, das Verhalten der Elternklasse zu erweitern, ohne es vollständig zu ersetzen.
Beispiel aus der Praxis: Mitarbeiter- und Managerklassen
Betrachten wir ein Szenario, in dem wir eine Employee-Klasse und eine Manager-Klasse haben, die diese erweitert. Die Manager-Klasse fügt neue Funktionalitäten zur Basisfunktionalität der Employee-Klasse hinzu.
class Employee { constructor(name, position) { this.name = name; this.position = position; } getDetails() { return `${this.name} works as a ${this.position}.`; } } class Manager extends Employee { constructor(name, position, department) { // Call the parent class constructor using super() super(name, position); this.department = department; } getDetails() { return `${super.getDetails()} They manage the ${ this.department } department.`; } } const manager = new Manager('Alice', 'Manager', 'Sales'); console.log(manager.getDetails()); // Output: Alice works as a Manager. They manage the Sales department.
In diesem Beispiel erweitert die Manager-Klasse die Employee-Klasse, indem sie eine neue department-Eigenschaft hinzufügt. Die getDetails()-Methode in der Manager-Klasse ruft die Methode der Elternklasse mit super.getDetails() auf und fügt dann ihre eigene abteilungsspezifische Information hinzu.
1. Was macht das extends-Schlüsselwort?
2. Warum verwenden wir super() im Konstruktor einer Kindklasse?
3. Was wird der folgende Code ausgeben?
Danke für Ihr Feedback!
