JS 06: Klassen & Objektorientierung (OOP)

🏗️ 1. Der Klassen-Bauplan: class, constructor & this

Mit ECMAScript 2015 (ES6) führte JavaScript eine elegante, standardisierte Klassensyntax ein. Eine Klasse ist wie ein technischer Bauplan, aus dem mit dem Schlüsselwort new beliebig viele konkrete Objekte (Instanzen) gefertigt werden:

class Benutzer {
  // Der Konstruktor wird beim Erzeugen mit 'new' aufgerufen:
  constructor(name, email) {
    this.name = name;     // Instanzvariable zuweisen
    this.email = email;
    this.erstelltAm = new Date();
  }

  // Methoden werden direkt im Klassenkörper definiert (ohne 'function'):
  begruessen() {
    return `Hallo, mein Name ist ${this.name}!`;
  }
}

// Instanziierung:
const user1 = new Benutzer("Anna Schmidt", "anna@dev.io");
console.log(user1.begruessen()); // "Hallo, mein Name ist Anna Schmidt!"

🔒 2. Kapselung: Getters, Setters & Datenvalidierung

Objektorientierte Kapselung schützt interne Zustände vor unkontrollierten Änderungen von außen. Mit get und set steuerst du Lese- und Schreibzugriffe und validierst eingehende Werte:

class Bankkonto {
  constructor(inhaber, startSaldo = 0) {
    this.inhaber = inhaber;
    this._saldo = startSaldo; // Konvention: Unterstrich signalisiert internen Zustand
  }

  // Getter: Zugriff wie auf eine normale Eigenschaft (konto.saldo)
  get saldo() {
    return this._saldo;
  }

  // Kontrollierte Methoden statt direktem Schreibzugriff:
  einzahlen(betrag) {
    if (betrag <= 0) {
      throw new Error("Einzahlungsbetrag muss positiv sein.");
    }
    this._saldo += betrag;
    return this._saldo;
  }
}

🧬 3. Vererbung mit extends & Elternaufruf super()

Klassen können Eigenschaften und Methoden von Basisklassen erben. Mit extends leitet man eine Kindklasse ab und mit super(...) ruft man den Konstruktor oder die Methoden der Elternklasse auf:

// Basisklasse:
class Fahrzeug {
  constructor(marke, modell, baujahr) {
    this.marke = marke;
    this.modell = modell;
    this.baujahr = baujahr;
  }

  beschreibung() {
    return `${this.marke} ${this.modell} (${this.baujahr})`;
  }
}

// Kindklasse erbt von Fahrzeug:
class ElektroAuto extends Fahrzeug {
  constructor(marke, modell, baujahr, batterieKapazitaet) {
    super(marke, modell, baujahr); // 1. Pflicht: Eltern-Konstruktor aufrufen!
    this.batterieKapazitaet = batterieKapazitaet; // 2. Eigene Eigenschaften setzen
  }

  // Methode der Elternklasse überschreiben & erweitern:
  beschreibung() {
    return `${super.beschreibung()} [Elektro: ${this.batterieKapazitaet} kWh]`;
  }

  reichweiteBerechnen(verbrauchPro100km) {
    return (this.batterieKapazitaet / verbrauchPro100km) * 100;
  }
}

📊 Klassenhierarchie (UML-Diagramm)

⚙️ 4. Statische Methoden & Fabrikfunktionen (static)

Statische Methoden gehören zur Klasse selbst und nicht zu einer einzelnen Instanz. Man ruft sie direkt über KlassenName.methode() auf. Sie eignen sich hervorragend für Hilfsfunktionen und Fabrikmuster (Factory Methods):

class ElektroAuto extends Fahrzeug {
  // ... Konstruktor und Methoden ...

  // Statische Fabrikmethode erzeugt vorkonfigurierte Instanzen:
  static erstelleStandardTesla() {
    return new ElektroAuto("Tesla", "Model 3", 2024, 75);
  }
}

// Aufruf direkt an der Klasse, ohne vorheriges 'new':
const meinTesla = ElektroAuto.erstelleStandardTesla();
console.log(meinTesla.beschreibung());
// "Tesla Model 3 (2024) [Elektro: 75 kWh]"

📑 5. Cheat-Sheet: JavaScript OOP & ES6 Klassen

🧠 Diagnostischer Selbst-Check

Überprüfe dein Verständnis der Kernkonzepte und typischen Denkfallen, bevor du den Code in der Web-IDE schreibst.

🎯 6. Aufgaben & Checkliste in aufgabe.js