Kapitel 11: Objekte (Dinge mit Eigenschaften)

Objekte sind Datenstrukturen, die Eigenschaften und Methoden haben. In diesem Kapitel lernen Sie alles über Objekte.

11.1 Objekt-Konzept: Eigenschaften + Methoden

Stellen Sie sich ein Objekt wie einen Gegenstand aus der echten Welt vor.

Beispiel: Ein Auto

Eigenschaft	Wert
Marke	"Toyota"
Farbe	"Rot"
Baujahr	2020
Kilometerstand	50000

Methode (Funktion im Objekt):

• fahren() - Das Auto fährt
• hupe() - Das Auto hupt

In JavaScript

let auto = {
    marke: "Toyota",
    farbe: "Rot",
    baujahr: 2020,
    kilometerstand: 50000,
    fahren: function() {
        console.log("Das Auto fährt...");
    },
    hupe: function() {
        console.log("Hup! Hup!");
    }
};

11.2 Objekt-Erstellung und Literal-Schreibweise

Methode 1: Objekt-Literal (Empfohlen)

let person = {
    name: "Max",
    alter: 25,
    stadt: "Berlin"
};

Methode 2: new Object()

let person = new Object();
person.name = "Max";
person.alter = 25;
person.stadt = "Berlin";

Methode 3: Konstruktor-Funktion

function Person(name, alter) {
    this.name = name;
    this.alter = alter;
    this.stadt = "Berlin";
}

let person1 = new Person("Max", 25);
let person2 = new Person("Lisa", 30);

Methode 4: Klassen (ES6, modern)

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

let person1 = new Person("Max", 25);

11.3 Objekt-Eigenschaften abrufen und ändern

Eigenschaften abrufen (Zugriff)

Methode 1: Punkt-Notation (Empfohlen)

let person = {
    name: "Max",
    alter: 25
};

console.log(person.name);  // "Max"
console.log(person.alter); // 25

Methode 2: Klammer-Notation

let person = {
    name: "Max",
    alter: 25
};

console.log(person["name"]);  // "Max"
console.log(person["alter"]); // 25

// Vorteil: Dynamische Eigenschaftsnamen
let eigenschaft = "name";
console.log(person[eigenschaft]);  // "Max"

Eigenschaften ändern (Mutieren)

let person = {
    name: "Max",
    alter: 25
};

// Ändern
person.alter = 26;
console.log(person.alter);  // 26

// Neue Eigenschaft hinzufügen
person.stadt = "Hamburg";
console.log(person.stadt);  // "Hamburg"

// Eigenschaft löschen
delete person.stadt;
console.log(person.stadt);  // undefined

11.4 Methoden: Funktionen in Objekten

Methoden sind Funktionen, die in Objekten gespeichert sind.

Methode definieren

let person = {
    name: "Max",
    alter: 25,
    // Methode (klassisch)
    begruesse: function() {
        console.log("Hallo, ich bin " + this.name);
    },
    // Methode (ES6 Kurzschreibweise)
    vorstellen() {
        console.log("Name: " + this.name + ", Alter: " + this.alter);
    }
};

person.begruesse();   // "Hallo, ich bin Max"
person.vorstellen(); // "Name: Max, Alter: 25"

this Schlüsselwort

this bezieht sich auf das Objekt selbst.

let person = {
    name: "Max",
    begruesse: function() {
        console.log("Hallo " + this.name);  // this = person
    }
};

person.begruesse();  // "Hallo Max"

Achtung bei this:

let person = {
    name: "Max",
    begruesse: function() {
        setTimeout(function() {
            console.log("Hallo " + this.name);  // this = window (nicht person!)
        }, 1000);
    }
};

// Lösung 1: Das Objekt in einer Variablen speichern
let person = {
    name: "Max",
    begruesse: function() {
        let self = this;  // self speichert this
        setTimeout(function() {
            console.log("Hallo " + self.name);  // self = person
        }, 1000);
    }
};

// Lösung 2: Arrow Function (this wird nicht neu gebunden)
let person = {
    name: "Max",
    begruesse: function() {
        setTimeout(() => {
            console.log("Hallo " + this.name);  // this = person
        }, 1000);
    }
};

11.5 Objekt durchlaufen: for...in Schleife

Die for...in Schleife wird verwendet, um alle Eigenschaften eines Objekts zu durchlaufen.

Grundlegende Verwendung

let person = {
    name: "Max",
    alter: 25,
    stadt: "Berlin"
};

for (let eigenschaft in person) {
    console.log(eigenschaft + ": " + person[eigenschaft]);
}
// Ausgabe:
// name: Max
// alter: 25
// stadt: Berlin

Nur eigene Eigenschaften prüfen (hasOwnProperty)

let person = {
    name: "Max"
};

for (let eigenschaft in person) {
    if (person.hasOwnProperty(eigenschaft)) {
        console.log(eigenschaft + ": " + person[eigenschaft]);
    }
}

Objekt-Array durchlaufen

let studenten = [
    { name: "Max", note: 85 },
    { name: "Lisa", note: 92 },
    { name: "Moritz", note: 78 }
];

for (let student of studenten) {
    console.log(student.name + ": " + student.note);
}
// Ausgabe:
// Max: 85
// Lisa: 92
// Moritz: 78

11.6 Praxis: Personen-Objekt erstellen / Waren-Objekt

Projekt 1: Personen-Objekt

// Personen-Objekt mit Methoden
let person = {
    vorname: "Max",
    nachname: "Mustermann",
    alter: 25,
    hobbys: ["Lesen", "Sport", "Musik"],
    
    // Methode: Voller Name
    vollerName: function() {
        return this.vorname + " " + this.nachname;
    },
    
    // Methode: Alter in 10 Jahren
    alterInZukunft: function(jahre) {
        return this.alter + jahre;
    },
    
    // Methode: Hobbys auflisten
    zeigeHobbys: function() {
        return this.hobbys.join(", ");
    }
};

console.log(person.vollerName());           // "Max Mustermann"
console.log(person.alterInZukunft(10));    // 35
console.log(person.zeigeHobbys());         // "Lesen, Sport, Musik"

Projekt 2: Waren-Objekt (Warenkorb)

// Waren-Objekt
let ware = {
    name: "Laptop",
    preis: 999.99,
    anzahl: 2,
    kategorie: "Elektronik",
    
    // Methode: Gesamtpreis berechnen
    gesamtpreis: function() {
        return this.preis * this.anzahl;
    },
    
    // Methode: Rabatt anwenden
    mitRabatt: function(rabattProzent) {
        let rabatt = this.preis * (rabattProzent / 100);
        return this.preis - rabatt;
    },
    
    // Methode: Wareninfo anzeigen
    info: function() {
        return `${this.name} (${this.kategorie}): ${this.preis}€ x ${this.anzahl}`;
    }
};

console.log(ware.info());                  // "Laptop (Elektronik): 999.99€ x 2"
console.log(ware.gesamtpreis());          // 1999.98
console.log(ware.mitRabatt(10));         // 899.991 (10% Rabatt)

Projekt 3: Studenten-Verwaltung

// Studenten-Array mit Objekten
let studenten = [
    { name: "Max", note: 85, bestanden: true },
    { name: "Lisa", note: 92, bestanden: true },
    { name: "Moritz", note: 45, bestanden: false }
];

// Alle Studenten anzeigen
for (let student of studenten) {
    console.log(`${student.name}: ${student.note} Punkte (${student.bestanden ? "Bestanden" : "Nicht bestanden"})`);
}

// Nur bestandene Studenten filtern
let bestandene = studenten.filter(function(student) {
    return student.bestanden;
});

console.log("Bestandene Studenten:", bestandene.length);

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Objekte haben Eigenschaften und Methoden
• ✅ Objekt-Erstellung: Literal-Schreibweise (empfohlen)
• ✅ Eigenschaften abrufen: obj.name oder obj["name"]
• ✅ Eigenschaften ändern: obj.alter = 26
• ✅ Methoden: Funktionen in Objekten
• ✅ this bezieht sich auf das Objekt selbst
• ✅ for...in Schleife: Objekt-Eigenschaften durchlaufen
• ✅ Praxis-Projekte: Personen-Objekt, Waren-Objekt, Studenten-Verwaltung

➡️ Nächster Schritt

Im nächsten Kapitel lernen wir String-Methoden - Werkzeuge zur Textverarbeitung!

---

Übung:

1. Erstellen Sie ein buch-Objekt mit Eigenschaften (titel, autor, seitenanzahl)
2. Fügen Sie eine Methode info() hinzu, die Buchinformationen ausgibt
3. Erstellen Sie ein Array mit mehreren Buch-Objekten
4. Durchlaufen Sie das Array und geben Sie die Informationen aus
5. Testen Sie alles in der Konsole