Objekte

Geschätzte Lektüre: 10 Minuten 396 Ansichten

Objekte bilden das Herzstück von JavaScript und sind einer der fundamentalen Bausteine der Sprache. Im Gegensatz zu primitiven Datentypen wie Zahlen oder Strings ermöglichen es Objekte, komplexe Datenstrukturen zu modellieren und zusammenhängende Informationen in einer einzigen Einheit zu bündeln. Diese Eigenschaft macht sie unverzichtbar für die Entwicklung moderner Webanwendungen.

Grundlagen von JavaScript-Objekten

Ein Objekt in JavaScript ist im Wesentlichen eine Sammlung von Schlüssel-Wert-Paaren, die als Eigenschaften (Properties) bezeichnet werden. Diese Eigenschaften können sowohl Daten (wie Variablen) als auch Funktionen (Methoden) enthalten. Man kann sich ein Objekt wie einen Schrank mit beschrifteten Schubladen vorstellen – jede Schublade hat einen Namen (Schlüssel) und enthält einen bestimmten Inhalt (Wert).

// Einfaches Objekt-Beispiel
const person = {
    vorname: "Max",
    nachname: "Mustermann",
    alter: 30,
    beruf: "Webentwickler",
    vorstellen: function() {
        console.log(`Hallo, ich bin ${this.vorname} ${this.nachname}.`);
    }
};

In diesem Beispiel ist person ein Objekt mit vier Eigenschaften ( vorname, nachname, alter, beruf ) und einer Methode ( vorstellen ). Methoden sind im Grunde Funktionen, die innerhalb eines Objekts definiert sind.

Erzeugung von Objekten

Es gibt mehrere Wege, Objekte in JavaScript zu erstellen, jeder mit seinen spezifischen Anwendungsfällen.

Objekt-Literale

Die einfachste und am häufigsten verwendete Methode ist die Objekt-Literal-Syntax mit geschweiften Klammern:

const auto = {
    marke: "Volkswagen",
    modell: "Golf",
    baujahr: 2020,
    starten: function() {
        console.log("Motor wird gestartet...");
    }
};

Diese Syntax ist besonders nützlich für einmalige Objekte oder Konfigurationsobjekte.

Konstruktorfunktionen

Vor der Einführung von Klassen in ES6 wurden Objekte oft über Konstruktorfunktionen erzeugt:

function Auto(marke, modell, baujahr) {
    this.marke = marke;
    this.modell = modell;
    this.baujahr = baujahr;
    this.starten = function() {
        console.log("Motor wird gestartet...");
    };
}

const meinAuto = new Auto("BMW", "X5", 2019);

ES6-Klassen

Moderner und übersichtlicher ist die Verwendung von Klassen:

class Auto {
    constructor(marke, modell, baujahr) {
        this.marke = marke;
        this.modell = modell;
        this.baujahr = baujahr;
    }
    
    starten() {
        console.log("Motor wird gestartet...");
    }
}

const meinAuto = new Auto("Tesla", "Model 3", 2021);

Zugriff auf Objekteigenschaften

Auf die Eigenschaften eines Objekts kann auf zwei Arten zugegriffen werden:

Punktnotation: objekt.eigenschaft
Klammernotation: objekt[‚eigenschaft‘] 

console.log(person.vorname); // "Max"
console.log(person['nachname']); // "Mustermann"

// Klammernotation ist nützlich,
// wenn der Eigenschaftsname in einer Variable gespeichert ist
const eigenschaft = 'alter';
console.log(person[eigenschaft]); // 30

Dynamische Eigenschaften

JavaScript-Objekte sind extrem flexibel – Eigenschaften können zur Laufzeit hinzugefügt, geändert oder gelöscht werden:

const buch = {
    titel: "JavaScript Grundlagen"
};

// Eigenschaft hinzufügen
buch.autor = "Anna Schmidt";
buch['seiten'] = 350;

// Eigenschaft ändern
buch.titel = "JavaScript für Fortgeschrittene";

// Eigenschaft löschen
delete buch.seiten;

Methoden in Objekten

Methoden sind Funktionen, die als Eigenschaften eines Objekts gespeichert sind. Innerhalb einer Methode bezieht sich das Schlüsselwort this auf das Objekt selbst:

const rechner = {
    zahl1: 0,
    zahl2: 0,
    setzeZahlen: function(a, b) {
        this.zahl1 = a;
        this.zahl2 = b;
    },
    addiere: function() {
        return this.zahl1 + this.zahl2;
    }
};

rechner.setzeZahlen(5, 7);
console.log(rechner.addiere()); // 12

Besondere Objekttypen

JavaScript bietet mehrere spezielle Objekttypen mit zusätzlichen Funktionen:

Array-Objekte
Arrays sind spezielle Objekte für die Speicherung geordneter Sammlungen:

const farben = ["rot", "grün", "blau"];
console.log(farben.length); // 3
farben.push("gelb"); // Methode des Array-Objekts

Datums-Objekte
Das Date-Objekt ermöglicht die Arbeit mit Datum und Uhrzeit:

const jetzt = new Date();
console.log(jetzt.getFullYear()); // Aktuelles Jahr

Reguläre Ausdrücke
RegExp-Objekte dienen der Textsuche und -manipulation:

const regex = new RegExp('\\d+');
console.log(regex.test('123')); // true

Prototypen und Vererbung

JavaScript verwendet ein prototypbasiertes Vererbungsmodell. Jedes Objekt hat einen Prototyp, von dem es Eigenschaften erben kann:

const fahrzeug = {
    fahre: function() {
        console.log("Das Fahrzeug bewegt sich.");
    }
};

const auto = Object.create(fahrzeug);
auto.marke = "Audi";
auto.fahre(); // "Das Fahrzeug bewegt sich."

Mit ES6-Klassen wird Vererbung übersichtlicher:

class Fahrzeug {
    fahre() {
        console.log("Das Fahrzeug bewegt sich.");
    }
}

class Auto extends Fahrzeug {
    constructor(marke) {
        super();
        this.marke = marke;
    }
}

const meinAuto = new Auto("Mercedes");
meinAuto.fahre();

Fortgeschrittene Konzepte

Getter und Setter
Getter und Setter ermöglichen eine kontrollierte Zugriff auf Objekteigenschaften:

const bankkonto = {
    _saldo: 0,
    
    get saldo() {
        return this._saldo;
    },
    
    set saldo(wert) {
        if (wert < 0) {
            console.log("Saldo kann nicht negativ sein");
            return;
        }
        this._saldo = wert;
    }
};

bankkonto.saldo = 100; // Setter wird aufgerufen
console.log(bankkonto.saldo); // Getter wird aufgerufen

Factory Functions

Anstatt Konstruktoren zu verwenden, können Factory Functions Objekte erzeugen:

function erstellePerson(name, alter) {
    return {
        name,
        alter,
        vorstellen() {
            console.log(`Ich bin ${this.name}, ${this.alter} Jahre alt.`);
        }
    };
}

const person1 = erstellePerson("Klaus", 45);

Destrukturierung von Objekten

Die Destrukturierung ermöglicht das einfache Extrahieren von Eigenschaften:

const student = {
    name: "Maria",
    fach: "Informatik",
    semester: 3
};

const { name, fach } = student;
console.log(name); // "Maria"

Praktische Anwendungen

Objekte sind in der Praxis allgegenwärtig:

Konfigurationsobjekte

function erstelleElement({ tag, inhalt, klasse }) {
    const el = document.createElement(tag);
    el.textContent = inhalt;
    el.className = klasse;
    return el;
}

const element = erstelleElement({
    tag: 'div',
    inhalt: 'Hallo Welt',
    klasse: 'container'
});

Modulmuster:

const datenModul = (function() {
    let daten = [];
    
    return {
        hinzufuegen: function(item) {
            daten.push(item);
        },
        anzeigen: function() {
            console.log(daten);
        }
    };
})();

API-Antworten verarbeiten:

fetch('https://api.example.com/users/1')
    .then(response => response.json())
    .then(user => {
        console.log(user.name);
        console.log(user.email);
    });

Best Practices

Objekt-Literale für einfache Strukturen bevorzugen
Klassen für komplexe Objekte mit vielen Instanzen verwenden
Unnötige Mutationen vermeiden – oft ist es besser, neue Objekte zu erstellen
Tiefe Kopien mit JSON.parse(JSON.stringify(obj)) oder structuredClone() erstellen
Object.freeze() für unveränderliche Objekte nutzen

    const konstantesObjekt = Object.freeze({
    PI: 3.14159,
    E: 2.71828
});

// Änderung wird ignoriert oder wirft Fehler im strict mode
konstantesObjekt.PI = 3;

    Allgegenwärtig

    Objekte sind in JavaScript allgegenwärtig und bilden die Grundlage für fast alle fortgeschrittenen Konzepte der Sprache. Von einfachen Datencontainern bis hin zu komplexen Anwendungskomponenten – das Verständnis von Objekten und ihren Eigenschaften ist essentiell für jeden JavaScript-Entwickler. Die Flexibilität von JavaScript-Objekten ermöglicht sowohl einfache Lösungen für kleine Probleme als auch ausgefeilte Architekturen für große Anwendungen. Mit den modernen Erweiterungen wie Klassen, Destrukturierung und Modulen hat JavaScript seine objektorientierten Fähigkeiten weiter verfeinert, während es gleichzeitig seine prototypbasierte Natur beibehält.

    Dieses Dokument teilen

    Objekte

    Oder Link kopieren

    INHALT

    Abonnieren

    ×
    Cancel