JavaScript Getter und Setter

Die meisten Objekteigenschaften in JavaScript sind Dateneigenschaften — sie speichern einfach einen Wert. Objekte unterstützen jedoch auch Accessor-Eigenschaften: Eigenschaften, die durch Funktionen hinterlegt sind, die immer dann ausgeführt werden, wenn die Eigenschaft gelesen oder geschrieben wird. Diese Funktionen werden als Getter und Setter bezeichnet. Nach außen hin sieht eine Accessor-Eigenschaft wie eine gewöhnliche Eigenschaft aus (user.age), doch hinter den Kulissen entscheidet Ihr eigener Code, was das Lesen oder Zuweisen tatsächlich bewirkt.

Dieser Leitfaden behandelt die get/set-Syntax, wie sich Accessor-Eigenschaften von Dateneigenschaften unterscheiden, die häufigsten Anwendungsfälle (Validierung und berechnete Werte), wie Getter und Setter innerhalb von Klassen funktionieren, und die wichtigsten Fallstricke, die es zu kennen gilt.

Einführung in Property Getter und Setter

Ein Getter ist eine Funktion, die ausgeführt wird, wenn Sie eine Eigenschaft lesen; ihr Rückgabewert wird zum Wert des Zugriffs. Ein Setter ist eine Funktion, die ausgeführt wird, wenn Sie einer Eigenschaft einen Wert zuweisen; sie empfängt den zugewiesenen Wert als einziges Argument. Da es sich um Funktionen handelt, können sie Validierungen durchführen, ein Ergebnis dynamisch berechnen, Zugriffe protokollieren oder andere Eigenschaften aktualisieren — während der aufrufende Code die einfache Eigenschaftssyntax verwendet.

Syntax

Definieren Sie innerhalb eines Objektliterals einen Getter mit dem Schlüsselwort get gefolgt von einer Methode, und einen Setter mit dem Schlüsselwort set gefolgt von einer Methode, die einen Parameter akzeptiert:

let obj = {
  get propName() {
    // getter, the code executed when obj.propName is read
  },
  set propName(value) {
    // setter, the code executed when obj.propName is written
  }
};

Sie können beide definieren oder nur einen. Eine Eigenschaft mit nur einem Getter ist schreibgeschützt; eine Zuweisung bewirkt im Nicht-Strict-Modus nichts und wirft im Strict-Modus einen TypeError. Eine Eigenschaft mit nur einem Setter ist nur schreibbar — das Lesen gibt undefined zurück.

Accessor-Eigenschaften vs. Dateneigenschaften

Es lohnt sich, genau zu unterscheiden, welche Art von Eigenschaft ein Getter/Setter erstellt. Eine reguläre Eigenschaft wie width: 5 ist eine Dateneigenschaft mit einem value. Ein Getter/Setter-Paar erstellt hingegen eine Accessor-Eigenschaft, die keinen eigenen value besitzt — nur get- und set-Funktionen. Die beiden schließen sich gegenseitig aus: Ein einzelner Property-Deskriptor kann nicht sowohl einen value als auch get/set haben.

Deshalb speichern die Validierungsbeispiele weiter unten die tatsächliche Zahl in einem separaten Backing-Feld (_age): Der öffentliche age-Accessor benötigt einen Ort zum Speichern der Daten, da er keinen eigenen Value-Slot hat. Um dies direkt zu untersuchen, lesen Sie Property Flags und Deskriptoren.

Warum Getter und Setter verwenden?

Getter und Setter bieten mehrere Vorteile, darunter:

• Kapselung: Sie verbergen die interne Darstellung hinter einer stabilen öffentlichen Schnittstelle. Sie können später ändern, wie ein Wert gespeichert wird, ohne den Code zu beeinträchtigen, der ihn liest.
• Validierung: Sie können Werte im Setter ablehnen oder normalisieren, bevor sie gespeichert werden.
• Berechnete Eigenschaften: Ein Getter kann sein Ergebnis aus anderen Eigenschaften ableiten, sodass der Wert stets aktuell ist und nie veraltet gespeichert wird.
• Abwärtskompatibilität: Wenn eine Eigenschaft, die früher ein einfaches Feld war, später Logik benötigt, können Sie sie durch einen Accessor desselben Namens ersetzen — der aufrufende Code ändert sich nicht.

Praktische Beispiele

Tauchen wir in einige praktische Beispiele ein, um zu veranschaulichen, wie Getter und Setter in realen Szenarien eingesetzt werden können.

Beispiel 1: User-Objekt mit Altersvalidierung

Betrachten Sie ein User-Objekt, bei dem sichergestellt werden soll, dass die Eigenschaft age immer in einem vernünftigen Bereich liegt. Der Setter validiert die Eingabe; der Getter gibt einfach das Backing-Feld zurück.

Beispiel 2: Berechnete Eigenschaften erstellen

Getter ermöglichen es uns, Eigenschaften zu erstellen, die auf Basis anderer Daten dynamisch berechnet werden. Jedes Mal, wenn area gelesen wird, wird sie neu berechnet, sodass sie bei Änderungen von width oder height stets aktuell bleibt.

Beispiel 3: Accessor mit Object.defineProperty definieren

Die get/set-Literalsyntax ist die gebräuchlichste Methode zur Deklaration von Accessors, aber Sie können sie auch einem vorhandenen Objekt hinzufügen — auch nachdem es erstellt wurde — mit Object.defineProperty. Dies ist praktisch, wenn der Eigenschaftsname dynamisch ist oder wenn Sie Flags wie enumerable steuern möchten.

Best Practices

Beachten Sie beim Einsatz von Gettern und Settern die folgenden Best Practices, um sicherzustellen, dass Ihr Code sauber, wartbar und effizient ist:

• Keine Seiteneffekte in Gettern: Getter sollten schnell und frei von Seiteneffekten sein, da sie häufig implizit von der Engine oder bei der Eigenschaftsaufzählung aufgerufen werden.
• Validierung: Validieren Sie Daten in Settern stets, um zu verhindern, dass ungültige oder schädliche Daten gespeichert werden.
• Namenskonventionen: Verwenden Sie einen führenden Unterstrich (_) für die Namen der Backing-Eigenschaften, um anzuzeigen, dass sie privat sind.
• JSON-Serialisierung: Beachten Sie, dass JSON.stringify() Getter standardmäßig ignoriert. Verwenden Sie eine Replacer-Funktion oder explizite Serialisierung, wenn Sie berechnete Werte einschließen müssen.

Erweiterte Anwendungsfälle

Dynamische Eigenschaftsnamen

JavaScript ES6 führte berechnete Eigenschaftsnamen ein, die mit Gettern und Settern kombiniert werden können, um Accessor-Schlüssel dynamisch auf Basis von Variablen oder Ausdrücken zu definieren.

Integration in Klassen

Getter und Setter sind auch in der klassenbasierten Programmierung sehr nützlich und bieten eine Möglichkeit, den Zugriff auf Klasseneigenschaften zu kapseln und zu steuern. Die Syntax ist identisch — schreiben Sie einfach get/set-Methoden im Klassenkörper — und sie werden im Prototype platziert, sodass alle Instanzen sie gemeinsam nutzen.

Häufige Fallstricke

Einige Fehler überraschen Entwickler immer wieder:

• Unendliche Rekursion durch ein falsches Backing-Feld. Wenn ein Setter für name an this.name statt an ein separates Feld wie this._name zuweist, löst die Zuweisung den Setter erneut aus — und das immer wieder. Speichern Sie den Wert stets unter einem anderen Schlüssel.
• Ein Getter ohne Setter ist schreibgeschützt. Das Zuweisen bewirkt nichts (oder wirft im Strict-Modus eine Ausnahme), was wie ein stiller Fehler aussehen kann.
• JSON.stringify() ruft Getter auf, ignoriert aber Setter. Ein berechneter Getter wird serialisiert (sein Rückgabewert wird eingeschlossen), aber es gibt keine Möglichkeit, ihn über einen Setter bei JSON.parse() wiederherzustellen — Sie erhalten nur einfache Daten zurück.
• this folgt dem Aufrufkontext. Innerhalb eines Getters oder Setters ist this das Objekt, auf das die Eigenschaft zugegriffen wurde. Wenn Sie den Accessor auf ein anderes Objekt kopieren, ändert sich this entsprechend — siehe Objekt-Methoden und "this".

Das folgende Beispiel zeigt die Rekursionsfalle und ihre Behebung:

Fazit

Die Beherrschung von Property Gettern und Settern ist ein entscheidender Schritt auf dem Weg zum erfahrenen JavaScript-Entwickler. Diese Funktionen verbessern nicht nur die Funktionalität und Sicherheit Ihres Codes, sondern ebnen auch den Weg für besser lesbare und wartbare Codebasen. Indem Sie die in diesem Leitfaden beschriebenen Best Practices und Beispiele befolgen, können Entwickler Getter und Setter effektiv zu ihrem Vorteil nutzen und so robustere und effizientere JavaScript-Anwendungen erstellen.

Übungen