Vererbung

Teil des Abschnitts Objektorientierte Programmierung der JavaScript-Journey von Coddy — Lektion 24 von 56.

Vererbung in JavaScript OOP ist eine Möglichkeit für eine Klasse, Zugriff auf alle Eigenschaften und Methoden einer anderen Klasse zu erhalten.

Schauen wir uns ein Beispiel an. Erstellen Sie eine Basisklasse:

class Vehicle {
 constructor(brand, model) {
   this.brand = brand;
   this.model = model;
 }
 drive() {
   console.log("Driving!");
 }
}

Erstellen Sie nun eine Kindklasse, die von Vehicle erbt:

// Car erbt von Vehicle
class Car extends Vehicle {
 honk() {
   console.log("Beep beep!");
 }
}

Erstellen Sie eine Instanz der untergeordneten Klasse:

const myCar = new Car("Toyota", "Camry");

Greifen Sie auf Eigenschaften und Methoden zu:

console.log(myCar.brand);  // "Toyota" - geerbt von Vehicle
console.log(myCar.model);  // "Camry" - geerbt von Vehicle
// Car kann auf die Methoden von Vehicle zugreifen
myCar.drive();  // "Driving!" - geerbt von Vehicle
// Car hat auch eigene Methoden
myCar.honk();   // "Beep beep!" - spezifisch für Car

Aufgabe

Dir werden eine Animal-Klasse und eine Dog-Klasse, die von ihr erbt, gegeben. Deine Aufgabe ist es, ein myDog-Objekt mit dem Namen "Buddy" und dem Alter 3 zu erstellen.

Spickzettel

Vererbung ermöglicht es einer Klasse, mithilfe des Schlüsselworts extends auf Eigenschaften und Methoden einer anderen Klasse zuzugreifen.

Elternklasse:

class Vehicle {
 constructor(brand, model) {
   this.brand = brand;
   this.model = model;
 }
 drive() {
   console.log("Driving!");
 }
}

Kindklasse, die von der Elternklasse erbt:

class Car extends Vehicle {
 honk() {
   console.log("Beep beep!");
 }
}

Die Kindklasse erbt alle Eigenschaften und Methoden von der Elternklasse und kann auch eigene besitzen:

const myCar = new Car("Toyota", "Camry");
console.log(myCar.brand);  // "Toyota" - geerbt
myCar.drive();  // "Driving!" - geerbt
myCar.honk();   // "Beep beep!" - eigene Methode

Probier es selbst

import { Dog } from './animal.js';

// TODO: Erstelle das Objekt myDog mit dem Namen "Buddy" und dem Alter 3.


// Testcode - nicht ändern
console.log(myDog.name);  // Sollte "Buddy" ausgeben
console.log(myDog.age);  // Sollte 3 ausgeben