Lernen 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.


              1234567891011121314151617181920
            
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.


              1234567891011121314151617181920212223242526
            
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.


              1234567891011121314151617181920212223242526272829
            
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.


              12345678910111213141516171819202122232425262728
            
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.

War alles klar?

Danke für Ihr Feedback!

Abschnitt 1. Kapitel 14

Fragen Sie AI

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 2.22

Swipe um das Menü anzuzeigen

Was ist Klassenvererbung?

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.


              1234567891011121314151617181920
            
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

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


              1234567891011121314151617181920212223242526
            
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!

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.

Beispiel: Methoden überschreiben und super() verwenden


              1234567891011121314151617181920212223242526272829
            
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.

Beispiel aus der Praxis: Mitarbeiter- und Managerklassen


              12345678910111213141516171819202122232425262728
            
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.

War alles klar?

Danke für Ihr Feedback!

Abschnitt 1. Kapitel 14

Vererbung mit Extends und Verwendung von Super()

Was ist Klassenvererbung?

Wie man das extends Schlüsselwort verwendet

Arbeiten mit dem Konstruktor in einer Kindklasse

Verwendung von super() zum Aufrufen des Konstruktors der Elternklasse

Wichtige Punkte bei der Verwendung von extends und super()

Beispiel: Methoden überschreiben und super() verwenden

Beispiel aus der Praxis: Mitarbeiter- und Managerklassen

1. Was macht das `extends`-Schlüsselwort?

2. Warum verwenden wir `super()` im Konstruktor einer Kindklasse?

3. Was wird der folgende Code ausgeben?

Awesome!

Vererbung mit Extends und Verwendung von Super()

Was ist Klassenvererbung?

Wie man das extends Schlüsselwort verwendet

Arbeiten mit dem Konstruktor in einer Kindklasse

Verwendung von super() zum Aufrufen des Konstruktors der Elternklasse

Wichtige Punkte bei der Verwendung von extends und super()

Beispiel: Methoden überschreiben und super() verwenden

Beispiel aus der Praxis: Mitarbeiter- und Managerklassen

1. Was macht das `extends`-Schlüsselwort?

2. Warum verwenden wir `super()` im Konstruktor einer Kindklasse?

3. Was wird der folgende Code ausgeben?

Vererbung mit Extends und Verwendung von Super()

Was ist Klassenvererbung?

Wie man das extends Schlüsselwort verwendet

Arbeiten mit dem Konstruktor in einer Kindklasse

Verwendung von super() zum Aufrufen des Konstruktors der Elternklasse

Wichtige Punkte bei der Verwendung von extends und super()

Beispiel: Methoden überschreiben und super() verwenden

Beispiel aus der Praxis: Mitarbeiter- und Managerklassen

1. Was macht das extends-Schlüsselwort?

2. Warum verwenden wir super() im Konstruktor einer Kindklasse?

3. Was wird der folgende Code ausgeben?

Awesome!

Vererbung mit Extends und Verwendung von Super()

Was ist Klassenvererbung?

Wie man das extends Schlüsselwort verwendet

Arbeiten mit dem Konstruktor in einer Kindklasse

Verwendung von super() zum Aufrufen des Konstruktors der Elternklasse

Wichtige Punkte bei der Verwendung von extends und super()

Beispiel: Methoden überschreiben und super() verwenden

Beispiel aus der Praxis: Mitarbeiter- und Managerklassen

1. Was macht das extends-Schlüsselwort?

2. Warum verwenden wir super() im Konstruktor einer Kindklasse?

3. Was wird der folgende Code ausgeben?

1. Was macht das `extends`-Schlüsselwort?

2. Warum verwenden wir `super()` im Konstruktor einer Kindklasse?

1. Was macht das `extends`-Schlüsselwort?

2. Warum verwenden wir `super()` im Konstruktor einer Kindklasse?