Menu
Coddy logo textTech

Die super()-Methode

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

Die super()-Methode erstellt und initialisiert das Objekt unter Verwendung des Konstruktors der Elternklasse. Sie muss aufgerufen werden, bevor Sie der Kindklasse Eigenschaften hinzufügen können.

Stellen Sie es sich so vor: Die Elternklasse bildet das Fundament des Objekts, und super() sagt „baue zuerst dieses Fundament“, bevor die Kindklasse ihre eigenen Funktionen hinzufügt.

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

class Employee {
  constructor(name) {
    this.name = name;
  }
}

Erstellen Sie nun eine Kind-Klasse, die die Eltern-Klasse erweitert:

class Manager extends Employee {
  constructor(name, department) {
    super(name); // Den Eltern-Konstruktor mit name aufrufen
    this.department = department;
  }
}

Was hier passiert:

  1. constructor(name, department) – Manager benötigt sowohl einen Namen als auch eine Abteilung
  2. super(name) – Übergibt name an den Konstruktor von Employee
  1. this.department – Legt die eindeutige Eigenschaft des Managers fest

Dadurch wird ein Manager erstellt, der sowohl geerbte Eigenschaften (name) als auch eigene Eigenschaften (department) besitzt!

Erstellen Sie eine Instanz der untergeordneten Klasse:

const myManager = new Manager("Sarah", "Engineering");
console.log(myManager.name);      // "Sarah"
console.log(myManager.department); // "Engineering"

Die Methode super() muss aufgerufen werden, bevor this im Konstruktor einer abgeleiteten Klasse verwendet wird. Wenn Sie super() nicht aufrufen, wird JavaScript einen Referenzfehler auslösen.

challenge icon

Aufgabe

Gegeben ist eine Salad-Klasse, die Meal erweitert. Der Salat sollte sowohl einen Namen als auch Zutaten haben.

Deine Aufgabe besteht darin, den Konstruktor der Salad-Klasse wie folgt zu vervollständigen:

  1. super() mit der name-Eigenschaft aufrufen
  2. Die ingredients-Eigenschaft setzen

Probier es selbst

import { Meal } from './classes.js';
import { Salad } from './classes.js';

// Testcode - nicht ändern
const salad = new Salad("Caesar", ["lettuce", "croutons", "cheese"]);
console.log(salad.name);       // Sollte "Caesar" ausgeben
console.log(salad.ingredients); // Sollte ["lettuce", "croutons", "cheese"] ausgeben
quiz iconTeste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Alle Lektionen in Objektorientierte Programmierung

Übe selbstständig: Online-JavaScript-Compiler