Kapitel 13: Klassen (Object-Orientierte Programmierung)

13.1 Klassen-Definition

📦 Was sind Klassen in ES6?

ES6 führt das class Schlüsselwort ein, um Klassen zu definieren (Syntactic Sugar über dem Prototypen-Konzept).

// Syntax
class KlassenName {
  // Klassenkörper
}

---

🎯 Einfaches Beispiel

// ❌ Alte Methode (ES5) - Konstruktor-Funktion
function Person(name, alter) {
  this.name = name;
  this.alter = alter;
}

Person.prototype.greet = function() {
  return "Hallo, ich bin " + this.name;
};

var p1 = new Person("Max", 25);
console.log(p1.greet()); // "Hallo, ich bin Max"

// ✅ Neue Methode (ES6) - class
class Person {
  constructor(name, alter) {
    this.name = name;
    this.alter = alter;
  }
  
  greet() {
    return `Hallo, ich bin ${this.name}`;
  }
}

const p2 = new Person("Max", 25);
console.log(p2.greet()); // "Hallo, ich bin Max"

---

🔍 Vergleich: ES5 vs ES6

Aspekt	ES5 (Konstruktor-Funktion)	ES6 (class)
Definition	function Person() {}	class Person {}
Konstruktor	function Person() { ... }	constructor() { ... }
Methoden	Person.prototype.method = function() {}	method() { ... }
Lesbarkeit	❌ Weniger lesbar	✅ Bessere Lesbarkeit

---

13.2 constructor Konstruktor

🏗️ Was ist der constructor?

Der constructor ist eine spezielle Methode, die automatisch aufgerufen wird, wenn eine Klasse mit new instanziiert wird.

class Person {
  constructor(name, alter) {
    this.name = name;   // Eigenschaft
    this.alter = alter; // Eigenschaft
  }
}

const person = new Person("Max", 25);
console.log(person.name);  // "Max"
console.log(person.alter); // 25

---

🎯 Standardwerte im Konstruktor

class Person {
  constructor(name = "Gast", alter = 0) {
    this.name = name;
    this.alter = alter;
  }
}

const p1 = new Person("Max", 25);
console.log(p1.name); // "Max"

const p2 = new Person();  // Standardwerte verwenden
console.log(p2.name); // "Gast"
console.log(p2.alter); // 0

---

⚠️ Wichtig: constructor ist optional

class Person {
  // Kein constructor → JS erstellt automatisch einen leeren constructor()
}

const p = new Person();
console.log(p); // Person {}

---

13.3 Methoden-Definition

🔧 Methoden in Klassen

Methoden in Klassen werden ohne function Schlüsselwort definiert.

class Person {
  constructor(name) {
    this.name = name;
  }
  
  // Methode 1: Instanz-Methode
  greet() {
    return `Hallo, ich bin ${this.name}`;
  }
  
  // Methode 2: Eine weitere Methode
  introduce(alter) {
    return `${this.greet()} und ich bin ${alter} Jahre alt.`;
  }
}

const person = new Person("Max");
console.log(person.greet());        // "Hallo, ich bin Max"
console.log(person.introduce(25)); // "Hallo, ich bin Max und ich bin 25 Jahre alt."

---

🎯 Getter und Setter

class Person {
  constructor(name) {
    this._name = name;  // Konvention: _ vor private Eigenschaften
  }
  
  // Getter
  get name() {
    return this._name;
  }
  
  // Setter
  set name(newName) {
    if (newName.length > 0) {
      this._name = newName;
    }
  }
}

const person = new Person("Max");
console.log(person.name); // "Max" (Getter aufgerufen)

person.name = "Erika";   // (Setter aufgerufen)
console.log(person.name); // "Erika"

---

13.4 Vererbung: extends / super

🧬 Was ist Vererbung?

Vererbung erlaubt es einer Klasse (Kind-Klasse), Eigenschaften und Methoden einer anderen Klasse (Eltern-Klasse) zu erben.

// Syntax
class KindKlasse extends ElternKlasse {
  // ...
}

---

🎯 Einfaches Beispiel

// Eltern-Klasse
class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(`${this.name} macht ein Geräusch.`);
  }
}

// Kind-Klasse
class Dog extends Animal {
  constructor(name) {
    super(name);  // ruft den Konstruktor der Eltern-Klasse auf
  }
  
  speak() {
    console.log(`${this.name} bellt.`);
  }
}

const dog = new Dog("Bello");
dog.speak(); // "Bello bellt."

---

🔑 super Schlüsselwort

super wird verwendet, um auf Methoden der Eltern-Klasse zuzugreifen.

Verwendung	Beschreibung
super()	Ruft den Konstruktor der Eltern-Klasse auf
super.method()	Ruft eine Methode der Eltern-Klasse auf

---

🎯 super() im Konstruktor

class Person {
  constructor(name, alter) {
    this.name = name;
    this.alter = alter;
  }
}

class Student extends Person {
  constructor(name, alter, studiengang) {
    super(name, alter);  // Muss zuerst aufgerufen werden!
    this.studiengang = studiengang;
  }
}

const student = new Student("Max", 25, "Informatik");
console.log(student.name);        // "Max"
console.log(student.studiengang); // "Informatik"

Wichtig: super() muss vor this aufgerufen werden!

---

🎯 super.method() Methode überschreiben

class Person {
  greet() {
    return "Hallo!";
  }
}

class Student extends Person {
  greet() {
    const parentGreeting = super.greet();  // Eltern-Methode aufrufen
    return `${parentGreeting} Ich bin ein Student.`;
  }
}

const student = new Student();
console.log(student.greet()); // "Hallo! Ich bin ein Student."

---

13.5 Statische Methoden static

🔧 Was sind statische Methoden?

Statische Methoden gehören zur Klasse selbst, nicht zu ihren Instanzen. Sie werden mit dem static Schlüsselwort definiert.

class MathUtils {
  static add(a, b) {
    return a + b;
  }
  
  static multiply(a, b) {
    return a * b;
  }
}

// ✅ Richtig: Auf Klasse aufrufen
console.log(MathUtils.add(2, 3));      // 5
console.log(MathUtils.multiply(2, 3)); // 6

// ❌ Falsch: Auf Instanz aufrufen
const utils = new MathUtils();
console.log(utils.add(2, 3));  // ❌ TypeError: utils.add is not a function

---

🎯 Praxisbeispiel: Utility-Klasse

class StringUtils {
  static capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
  }
  
  static reverse(str) {
    return str.split("").reverse().join("");
  }
}

console.log(StringUtils.capitalize("hallo")); // "Hallo"
console.log(StringUtils.reverse("hallo"));  // "ollah"

---

13.6 Praxis: Instanz-Objekte erstellen

🎯 Beispiel 1: Person Klasse

class Person {
  constructor(name, alter) {
    this.name = name;
    this.alter = alter;
    this.hobbys = [];
  }
  
  addHobby(hobby) {
    this.hobbys.push(hobby);
  }
  
  getInfo() {
    return `${this.name} (${this.alter}) - Hobbys: ${this.hobbys.join(", ")}`;
  }
}

// Instanzen erstellen
const max = new Person("Max", 25);
max.addHobby("Sport");
max.addHobby("Lesen");

console.log(max.getInfo()); 
// "Max (25) - Hobbys: Sport, Lesen"

---

🎯 Beispiel 2: Vererbung in der Praxis

// Basis-Klasse
class Vehicle {
  constructor(marke, modell) {
    this.marke = marke;
    this.modell = modell;
  }
  
  getInfo() {
    return `${this.marke} ${this.modell}`;
  }
}

// Abgeleitete Klasse
class Car extends Vehicle {
  constructor(marke, modell, anzahlTüren) {
    super(marke, modell);
    this.anzahlTüren = anzahlTüren;
  }
  
  getInfo() {
    return `${super.getInfo()} (${this.anzahlTüren} Türen)`;
  }
}

const car = new Car("Toyota", "Corolla", 4);
console.log(car.getInfo()); // "Toyota Corolla (4 Türen)"

---

🎯 Beispiel 3: Student und Teacher Klassen

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

class Student extends Person {
  constructor(name, matrikelnummer) {
    super(name);
    this.matrikelnummer = matrikelnummer;
  }
  
  lernen() {
    console.log(`${this.name} lernt.`);
  }
}

class Teacher extends Person {
  constructor(name, fach) {
    super(name);
    this.fach = fach;
  }
  
  unterrichten() {
    console.log(`${this.name} unterrichtet ${this.fach}.`);
  }
}

const student = new Student("Max", "12345");
student.lernen(); // "Max lernt."

const teacher = new Teacher("Frau Müller", "Mathematik");
teacher.unterrichten(); // "Frau Müller unterrichtet Mathematik."

---

🎉 Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ Klassen-Definition (class)
• ✅ constructor Konstruktor
• ✅ Methoden-Definition
• ✅ Vererbung (extends, super)
• ✅ Statische Methoden (static)
• ✅ Praxisanwendungen (Instanz-Objekte erstellen)

📝 Übung

1. Klasse definieren:

   // Erstelle eine Klasse "Book" mit Eigenschaften "titel" und "autor"
   // Füge eine Methode "getInfo()" hinzu

2. Vererbung:

   // Erstelle eine Klasse "EBook", die von "Book" erbt
   // Füge eine Eigenschaft "dateiformat" hinzu

3. Statische Methode:

   // Erstelle eine statische Methode "compare(b1, b2)", die zwei Bücher vergleicht

➡️ Nächstes Kapitel

In Kapitel 14 lernen wir Modularisierung (import / export) - moderne Art, Code in mehrere Dateien aufzuteilen!