Vererben von Eigenschaften & Methoden

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

Wenn eine Klasse eine andere Klasse erweitert, erbt sie alle Eigenschaften und Methoden von der Elternklasse. Das bedeutet, dass Kindklassen automatisch Zugriff auf alles haben, was in der Elternklasse definiert ist.

Erstellen wir eine Elternklasse mit Eigenschaften und Methoden:

class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  eat() {
    return `${this.name} is eating`;
  }
  
  sleep() {
    return `${this.name} is sleeping`;
  }
}

Erstellen wir nun eine Kindklasse, die von Animal erbt:

class Dog extends Animal {
  constructor(name, age, breed) {
    super(name, age);
    this.breed = breed;
  }
}

Erstellen Sie eine Instanz der Dog-Klasse:

const rex = new Dog("Rex", 3, "German Shepherd");

Obwohl wir eat() und sleep() nicht in der Klasse Dog definiert haben, können wir diese Methoden dennoch verwenden:

console.log(rex.eat());  // Outputs: Rex is eating
console.log(rex.sleep()); // Outputs: Rex is sleeping

Und wir können auf alle geerbten Eigenschaften zugreifen:

console.log(rex.name);  // Ausgabe: Rex
console.log(rex.age);   // Ausgabe: 3
console.log(rex.breed); // Ausgabe: German Shepherd

Aufgabe

Erstelle eine Klasse Cake, die Dessert erweitert, und exportiere sie. Der Cake sollte Folgendes haben:

Alle geerbten Eigenschaften und Methoden von Dessert
Eine neue Eigenschaft flavor
Eine neue Methode addCandles(), die einen String “Added candles to ${this.name}!” zurückgibt

Spickzettel

Unterklassen erben alle Eigenschaften und Methoden von ihrer Elternklasse unter Verwendung des Schlüsselworts extends:

class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  eat() {
    return `${this.name} is eating`;
  }
  
  sleep() {
    return `${this.name} is sleeping`;
  }
}

class Dog extends Animal {
  constructor(name, age, breed) {
    super(name, age);
    this.breed = breed;
  }
}

const rex = new Dog("Rex", 3, "German Shepherd");
console.log(rex.eat());  // Rex is eating
console.log(rex.name);   // Rex
console.log(rex.breed);  // German Shepherd

Die Unterklasse kann auf alle geerbten Eigenschaften und Methoden zugreifen, ohne diese neu definieren zu müssen.

Probier es selbst

import { Dessert } from './desserts.js';
import { Cake } from './desserts.js';

// Testcode - nicht ändern
const myCake = new Cake("Birthday Cake", 300, "Chocolate");
console.log(myCake.describe());   // Sollte "Birthday Cake has 300 calories" ausgeben
console.log(myCake.flavor);       // Sollte "Chocolate" ausgeben
console.log(myCake.addCandles()); // Sollte "Added candles to Birthday Cake!" ausgeben