0Pricing
JavaScript Academy · Lektion

Vererbung, super und wann Komposition vorzuziehen ist

Eine Basisklasse mit extends erweitern, in Konstruktoren super aufrufen, Methoden sicher überschreiben und erkennen, wann einfache Komposition besser ist

Vererbung, super und wann Komposition vorzuziehen ist ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 3 Lektionen.

Das große Ganze

Ziel: Grundlegende Vererbung ohne Verwirrung verwenden.

  • extends erstellt eine Kindklasse
  • super(...) ruft den Konstruktor der Elternklasse auf
  • Eine Methode überschreiben und optional super.method() aufrufen
  • Wenn es kein „is-a“ ist, bevorzugen Sie Komposition
Vererbung, super und wann Komposition vorzuziehen ist — Illustration 1

extends plus super

Erstellen Sie mit extends eine Kindklasse; rufen Sie super(name) auf, um den Konstruktor der Elternklasse auszuführen und this einzurichten.

// Base class with a small field and method
class Animal {
  constructor(name) {
    this.name = name;
  }
  info() {
    return "Animal:" + this.name;
  }
}

// Child class extends the base and calls super(...)
class Dog extends Animal {
  constructor(name, breed) {
    // must call super() before using this
    super(name);
    this.breed = breed;
  }
  speak() {
    return "woof";
  }
}

const d = new Dog("Milo", "Beagle");
console.log(d.info(), d.speak());
Vererbung, super und wann Komposition vorzuziehen ist — Illustration 2

Methodenüberschreibung

Beim Überschreiben können Sie super.method() aufrufen, um die Logik der Basisklasse wiederzuverwenden, und anschließend Ihre Anpassung hinzufügen.

// Override a method; keep parent behavior with super.method()
class Button {
  click() {
    return "base-click";
  }
}

class IconButton extends Button {
  click() {
    // call parent behavior, then add something
    const base = super.click();
    return base + "+icon";
  }
}

const b = new IconButton();
console.log(b.click()); // "base-click+icon"
Vererbung, super und wann Komposition vorzuziehen ist — Illustration 3

Bei has-a Komposition bevorzugen

Wenn die Beziehung has-a lautet (eine Hilfsfunktion verwendet wird), bevorzugen Sie Komposition gegenüber Vererbung, damit Klassen einfach bleiben.

// Composition: use a helper object instead of extending
class Logger {
  log(msg) {
    console.log("[log]", msg);
  }
}

class Player {
  constructor(name, logger) {
    this.name = name;
    this.logger = logger; // has-a logger
  }
  score(points) {
    this.logger.log(this.name + " +" + points);
  }
}

const logger = new Logger();
const p = new Player("Ayla", logger);
p.score(5);
Vererbung, super und wann Komposition vorzuziehen ist — Illustration 4

is-a oder has-a

Vererbung bildet eine is-a-Beziehung ab: Ein Dog ist ein Animal. Komposition ist für has-a-Hilfsfunktionen gedacht.

// Use instanceof for a quick is-a check
console.log("Dog is Animal?", d instanceof Animal);
console.log("Player is Animal?", p instanceof Animal);
Vererbung, super und wann Komposition vorzuziehen ist — Illustration 5

Gewohnheiten für Anfänger

Tipps:

  • Halten Sie Hierarchien für Anfänger flach.
  • Rufen Sie super(...) in Konstruktoren von Unterklassen zuerst auf.
  • Überschreiben Sie nur, was nötig ist; verwenden Sie mit super.method() vorhandene Logik wieder.
  • Bevorzugen Sie Komposition für Hilfsfunktionen und übergreifende Funktionen.
Vererbung, super und wann Komposition vorzuziehen ist — Illustration 6

Quiz zu super(...)

Kurze Überprüfung: super im Konstruktor einer Unterklasse.

Vererbung, super und wann Komposition vorzuziehen ist — Illustration 7

Zusammenfassung

Zusammenfassung: Verwenden Sie extends für echtes is-a, rufen Sie super(...) früh auf, überschreiben Sie sorgfältig (rufen Sie bei Bedarf super.method() auf) und bevorzugen Sie Komposition für Hilfsfunktionen.

Vererbung, super und wann Komposition vorzuziehen ist — Illustration 8

Häufig gestellte Fragen

Ist die Lektion „Vererbung, super und wann Komposition vorzuziehen ist“ kostenlos?

Ja — der vollständige Text von „Vererbung, super und wann Komposition vorzuziehen ist“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „Vererbung, super und wann Komposition vorzuziehen ist“?

Eine Basisklasse mit extends erweitern, in Konstruktoren super aufrufen, Methoden sicher überschreiben und erkennen, wann einfache Komposition besser ist Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 3.

Wie lange dauert die Lektion „Vererbung, super und wann Komposition vorzuziehen ist“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Klassenfelder, private #-Felder und statische Member
  2. Vererbung, super und wann Komposition vorzuziehen ist
  3. Mixins (Einblick) – einfache Wiederverwendung ohne tiefe Hierarchien
← Zurück zu JavaScript Academy