Methoden und Eigenschaften

Geschätzte Lektüre: 10 Minuten 380 Ansichten

JavaScript als vielseitige Programmiersprache bietet zwei grundlegende Konzepte, die das Arbeiten mit Objekten ermöglichen: Eigenschaften (Properties) und Methoden. Diese Bausteine bilden das Fundament der objektorientierten Programmierung in JavaScript und sind essentiell für die Entwicklung dynamischer Webanwendungen.

Grundlagen: Objekte in JavaScript

Bevor wir uns Methoden und Eigenschaften widmen, müssen wir das Konzept von Objekten verstehen. In JavaScript ist ein Objekt ein Container für zusammengehörige Daten und Funktionen. Stellen Sie sich ein Objekt wie eine Schublade vor, die verschiedene Fächer (Eigenschaften) und Werkzeuge (Methoden) enthält.

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

In diesem Beispiel ist person ein Objekt mit drei Eigenschaften ( vorname, nachname, alter ) und einer Methode ( vorstellen ).

Eigenschaften (Properties) im Detail

Eigenschaften sind Variablen, die zu einem Objekt gehören. Sie speichern Zustände oder Merkmale des Objekts. Eine Eigenschaft besteht immer aus einem Schlüssel (key) und einem Wert (value).

Zugriff auf Eigenschaften

Es gibt zwei syntaktische Möglichkeiten:

• Punktnotation (ideal wenn der Eigenschaftsname bekannt und gültiger Bezeichner ist)

console.log(person.vorname); // Ausgabe: "Max"

• Klammernotation (notwendig bei Sonderzeichen oder dynamischen Zugriff)

console.log(person['nachname']); // Ausgabe: "Mustermann"

const eigenschaft = 'alter';
console.log(person[eigenschaft]); // Ausgabe: 30

Besondere Eigenschaftstypen

• Berechnete Eigenschaften (Computed Properties) ermöglichen die dynamische Erzeugung von Eigenschaftsnamen:

const prefix = 'user_';
const obj = {
    [prefix + 'name']: 'Anna',
    [prefix + 'id']: 12345
};
console.log(obj.user_name); // "Anna"

• Getter und Setter bieten kontrollierten Zugriff auf Eigenschaften:

const rechteck = {
    _breite: 10,
    _hoehe: 5,
    get flaeche() {
        return this._breite * this._hoehe;
    },
    set breite(wert) {
        if (wert > 0) this._breite = wert;
    }
};
rechteck.breite = 20; // Setter wird aufgerufen
console.log(rechteck.flaeche); // Getter gibt 100 zurück

Methoden im Detail

Methoden sind Funktionen, die einem Objekt zugeordnet sind. Sie definieren das Verhalten des Objekts und können auf dessen Eigenschaften zugreifen.

Methodendefinition

Es gibt mehrere Syntaxvarianten:

• Traditionelle Schreibweise

const rechner = {
    summe: function(a, b) {
        return a + b;
    }
};

• Kurzschreibweise (ES6)

const rechner = {
    summe(a, b) {
        return a + b;
    }
};

• Arrow-Funktionen (aber Vorsicht mit this )

const rechner = {
    summe: (a, b) => a + b
};

• Das this Schlüsselwort
Das spezielle this Keyword referenziert in einer Methode das Objekt, zu dem die Methode gehört. Es ermöglicht den Zugriff auf andere Eigenschaften und Methoden desselben Objekts.

const auto = {
    marke: 'VW',
    modell: 'Golf',
    details: function() {
        return `${this.marke} ${this.modell}`;
    }
};
console.log(auto.details()); // "VW Golf"

Achtung: Arrow-Funktionen haben kein eigenes this und erben es aus dem umgebenden Kontext, was oft zu unerwartetem Verhalten führt.

Prototypen und Vererbung

JavaScript verwendet ein prototypbasiertes Vererbungsmodell. Jedes Objekt hat einen versteckten Verweis ([[Prototype]]) auf ein Prototyp-Objekt, von dem es Eigenschaften und Methoden erbt.

function Person(name) {
    this.name = name;
}

Person.prototype.vorstellen = function() {
    console.log(`Hallo, ich bin ${this.name}`);
};

const max = new Person('Max');
max.vorstellen(); // "Hallo, ich bin Max"

In modernem JavaScript (ES6+) wird dies durch Klassen abstrahiert:

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

    vorstellen() {
        console.log(`Hallo, ich bin ${this.name}`);
    }
}

const anna = new Person('Anna');
anna.vorstellen(); // "Hallo, ich bin Anna"

Statische Methoden und Eigenschaften

Statische Member gehören zur Konstruktorfunktion bzw. Klasse selbst, nicht zu den Instanzen.

class Mathe {
    static pi = 3.14159;

    static quadrat(x) {
        return x * x;
    }
}

console.log(Mathe.quadrat(5)); // 25
console.log(Mathe.pi); // 3.14159

Property Descriptoren

JavaScript ermöglicht präzise Kontrolle über Eigenschaften durch Property Descriptoren:

const obj = {};
Object.defineProperty(obj, 'readOnly', {
    value: 42,
    writable: false,
    enumerable: true,
    configurable: false
});

obj.readOnly = 100; // Kein Effekt im strict mode
console.log(obj.readOnly); // 42

Die Attribute:
• writable: Kann der Wert geändert werden?
• enumerable: Wird die Eigenschaft in Schleifen angezeigt?
• configurable: Kann die Eigenschaft gelöscht oder verändert werden?

Fortgeschrittene Konzepte

Method Chaining
Durch Rückgabe von this können Methoden verknüpft werden:

const kette = {
    wert: 0,
    add(x) {
        this.wert += x;
        return this;
    },
    multiply(x) {
        this.wert *= x;
        return this;
    }
};

kette.add(5).multiply(2).add(10);
console.log(kette.wert); // 20

Factory Functions
Funktionen, die Objekte mit Methoden zurückgeben:

function createUser(name) {
    return {
        name,
        begruessen() {
            return `Hallo ${this.name}`;
        }
    };
}

const user = createUser('Klaus');
console.log(user.begruessen()); // "Hallo Klaus"

Mixins
Möglichkeit, Methoden zwischen Objekten zu teilen:

const canSwim = {
    swim() {
        console.log(`${this.name} schwimmt`);
    }
};

function Fisch(name) {
    return Object.assign({ name }, canSwim);
}

const nemo = Fisch('Nemo');
nemo.swim(); // "Nemo schwimmt"

Praktische Anwendung: Ein vollständiges Beispiel

class Bankkonto {
    constructor(inhaber, initialerBetrag = 0) {
        this.inhaber = inhaber;
        this._saldo = initialerBetrag;
        this.transaktionen = [];
    }

    get saldo() {
        return this._saldo;
    }

    einzahlen(betrag) {
        if (betrag <= 0) {
            console.log('Betrag muss positiv sein');
            return;
        }
        this._saldo += betrag;
        this.transaktionen.push({
            typ: 'einzahlung',
            betrag,
            datum: new Date()
        });
        return this;
    }

    abheben(betrag) {
        if (betrag > this._saldo) {
            console.log('Nicht genug Guthaben');
            return;
        }
        this._saldo -= betrag;
        this.transaktionen.push({
            typ: 'abhebung',
            betrag,
            datum: new Date()
        });
        return this;
    }

    kontoauszug() {
        console.log(`Konto von ${this.inhaber}`);
        console.log(`Aktueller Saldo: ${this._saldo}€`);
        console.log('Letzte Transaktionen:');
        this.transaktionen.slice(-5).forEach(t => {
            console.log(`${t.datum.toLocaleString()}: ${t.typ} ${t.betrag}€`);
        });
    }

    static transfer(von, zu, betrag) {
        von.abheben(betrag);
        zu.einzahlen(betrag);
    }
}

// Anwendung
const konto1 = new Bankkonto('Max Mustermann', 1000);
const konto2 = new Bankkonto('Erika Musterfrau');

konto1.einzahlen(500).abheben(200).kontoauszug();
Bankkonto.transfer(konto1, konto2, 300);

console.log(konto1.saldo); // 1000 + 500 - 200 - 300 = 1000
console.log(konto2.saldo); // 300

Flexibles System

Eigenschaften und Methoden bilden das Herzstück der JavaScript-Programmierung. Eigenschaften repräsentieren den Zustand eines Objekts, während Methoden sein Verhalten definieren. Durch fortgeschrittene Konzepte wie Prototypen, Getter/Setter, statische Member und Property Descriptoren bietet JavaScript ein mächtiges und flexibles System zur Objektmodellierung.

Das Verständnis dieser Konzepte ermöglicht die Erstellung gut strukturierter, wartbarer und erweiterbarer Anwendungen. Die Beherrschung von Methoden und Eigenschaften ist der Schlüssel zur effektiven Nutzung von JavaScripts objektorientierten Fähigkeiten, sei es in einfachen Skripten oder komplexen Anwendungsarchitekturen.

Dieses Dokument teilen

Methoden und Eigenschaften

Oder Link kopieren

INHALT

Abonnieren

×
Cancel