Klassen
Klassen sind Baupläne für Objekte: gleicher Aufbau, gleiches Verhalten, unterschiedliche Daten.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Klasse und Konstruktor
class definiert den Bauplan, constructor initialisiert jede neue Instanz.
Methoden stehen direkt im Klassenkoerper.
class Lernkarte {
constructor(frage, antwort) {
this.frage = frage;
this.antwort = antwort;
}
prüfen(eingabe) {
return eingabe === this.antwort;
}
}Instanzen
new ruft den Konstruktor auf und liefert ein neues Objekt.
Jede Instanz hat eigene Daten, teilt aber die Methoden der Klasse.
const karte = new Lernkarte('2+2?', '4');
karte.prüfen('4'); // true
karte instanceof Lernkarte; // trueVererbung
extends leitet eine Klasse von einer anderen ab.
super ruft den Konstruktor oder Methoden der Elternklasse auf.
class BildKarte extends Lernkarte {
constructor(frage, antwort, bildUrl) {
super(frage, antwort);
this.bildUrl = bildUrl;
}
}Vertiefung
Klassen sind Prototypen mit Syntax
Eine Klasse ist ein Bauplan für Objekte. Der Konstruktor initialisiert die Instanz; Methoden liegen auf dem Prototypen und werden von allen Instanzen geteilt.
extends und super bauen Vererbung. Vererbung nur verwenden, wenn wirklich eine „ist ein“-Beziehung besteht — sonst ist Komposition flexibler.
class Fahrzeug {
constructor(name) { this.name = name; }
fahre() { return `${this.name} fährt`; }
}
class Auto extends Fahrzeug {
constructor(name) { super(name); }
fahre() { return `${this.name} fährt auf der Straße`; }
}Merksatz: Klassen bündeln Zustand und Verhalten. Vererbung ist eine enge Beziehung, nicht ein Universalwerkzeug.
Übungsaufgabe
Fahrzeug-Flotte
Baue eine Klasse Fahrzeug und leite Auto und Fahrrad davon ab. Jede Unterklasse überschreibt fahre(). Lege alle in ein Array und rufe die Methode auf.
Das soll dein Programm können
- Oberklasse mit Konstruktor
- Zwei Unterklassen mit extends
- super im Konstruktor
- Array und Schleife für die Ausgabe
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Im Konstruktor der Unterklasse musst du zuerst super(name) aufrufen, bevor du this verwendest.
Lösung anzeigen
class Fahrzeug {
constructor(name) { this.name = name; }
fahre() { return `${this.name} bewegt sich`; }
}
class Auto extends Fahrzeug {
fahre() { return `${this.name} fährt auf der Straße`; }
}
class Fahrrad extends Fahrzeug {
fahre() { return `${this.name} fährt auf dem Radweg`; }
}
const flotte = [new Auto("Kombi"), new Fahrrad("Citybike")];
flotte.forEach((fahrzeug) => console.log(fahrzeug.fahre()));Warum funktioniert das?
Beide Unterklassen erben den Konstruktor und überschreiben fahre(). Die Schleife kennt nur Fahrzeug, ruft aber die passende Version auf.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Der Lernzähler
Baue einen kleinen Zähler, der bei jedem Klick hochzählt und den Wert im DOM anzeigt. Erweitere ihn um einen Reset-Button.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.