Getter

Die get Syntax bindet eine Objekteigenschaft an eine Funktion welche aufgerufen wird, wenn die Eigenschaft abgefragt wird.

Syntax

{get prop() { ... } }
{get [expression]() { ... } }

Parameter

prop
Der Name der Eigenschaft, die an die gegebene Funktion gebunden wird.
expression
Beginnend mit ECMAScript 2015, kann auch ein Ausdruck f├╝r einen berechneten Eigenschaftsnamen genutzt werden, der an die Funktion gebunden wird.

Beschreibung

Manchmal ist es w├╝nschenswert, den Zugriff auf eine Eigenschaft zuzulassen, die einen dynamisch berechneten Wert zur├╝ckgibt oder man m├Âchten den Status einer internen Variablen widerspiegeln, ohne dass explizite Methodenaufrufe erforderlich sind. In JavaScript kann dieses mit einem getter erreicht werden.

Es ist nicht m├Âglich, dass ein Getter gleichzeitig an eine Eigenschaft gebunden ist und diese Eigenschaft tats├Ąchlich einen Wert enth├Ąlt, obwohl es m├Âglich ist, einen Getter und einen Setter in Verbindung zu verwenden, um einen Pseudoeigenschaftstyp zu erstellen.

Folgendes ist zu beachten, wenn die get Syntax verwendet wird:

Beispiele

Definition eines Getters in einem neuen Objekt in der Objektinitialisierung

Folgendes erstellt eine Pseudoeigenschaft latest f├╝r das Objekt obj, welche dan letzte Arrayeintrag von log zur├╝ckgibt.

const obj = {
  log: ['example','test'],
  get latest() {
    if (this.log.length === 0) return undefined;
    return this.log[this.log.length - 1];
  }
}
console.log(obj.latest); // "test".

Zu beachten ist, dass die Zuweisung eines Wertes auf latest keine Änderung bewirkt.

L├Âschen eines Getters mit dem delete Operator

Wenn ein Getter gel├Âscht werden soll, kann einfach delete benutzt werden:

delete obj.latest;

Definition eines Getter auf einem existierenden Objektes mit defineProperty

Um einem Getter sp├Ąter zu einem existierenden Objekt hinzuzuf├╝gen, kann jederzeit Object.defineProperty() benutzt werden.

const o = {a: 0};

Object.defineProperty(o, 'b', { get: function() { return this.a + 1; } });

console.log(o.b) // Runs the getter, which yields a + 1 (which is 1)

Einen berechneten Eigenschaftnamen benutzen

const expr = 'foo';

const obj = {
  get [expr]() { return 'bar'; }
};

console.log(obj.foo); // "bar"

Intelligente / Selbst├╝berschreibende / Lazy Getter

Mit Gettern kann eine Eigenschaft eines Objekts definiert werden, wobei der Wert der Eigenschaft nicht berechnen wird, bis auf die Eigenschaft zugegriffen wird. Ein Getter verschiebt die Kosten f├╝r die Berechnung des Werts auf den Zeitpunkt des Zugriffs. Wenn der der Getter nie ben├Âtigt wird, fallen nie Kosten an.

Eine weitere Optimierungstechnik, um die Berechnung eines Eigenschaftswerts zu verz├Âgern und ihn f├╝r einen sp├Ąteren Zugriff zwischenzuspeichern, sind intelligente (oder "memoisierte") Getter. Der Wert wird berechnet, wenn der Getter das erste Mal aufgerufen wird und wird dann zwischengespeichert, damit nachfolgende Zugriffe den zwischengespeicherten Wert zur├╝ckgeben, ohne ihn neu zu berechnen. Dies ist in den folgenden Situationen n├╝tzlich:

  • Wenn die Berechnung eines Eigenschaftswerts teuer ist (erfordert viel RAM- oder CPU-Zeit, erzeugen von Worker-Threads, ruft eine Remote-Datei ab usw.).
  • Wenn der Wert gerade nicht ben├Âtigt wird. Er wird sp├Ąter verwendet oder in einigen F├Ąllen wird er ├╝berhaupt nicht verwendet.
  • Wenn er verwendet wird, wird mehrmals darauf zugegriffen und er ist nicht erforderlich, den Wert neu zu berechnen, da er nie ge├Ąndert oder nicht neu berechnet wird.

Das bedeutet, dass keine verz├Âgerten Getter f├╝r eine Eigenschaft verwenden werden sollten, deren Wert sich voraussichtlich ├Ąndern wird, weil der Getter den Wert nicht neu berechnet.

Im folgenden Beispiel hat das Objekt einen Getter als eigene Eigenschaft. Beim Abrufen der Eigenschaft wird die Eigenschaft aus dem Objekt entfernt und erneut hinzugef├╝gt, diesmal jedoch implizit als Dateneigenschaft. Abschlie├čend wird der Wert zur├╝ckgegeben.

get notifier() {
  delete this.notifier;
  return this.notifier = document.getElementById('bookmarked-notification-anchor');
},

F├╝r Firefox Code sollte zus├Ątzlich das XPCOMUtils.jsm Code Modul angeschaut werden, welches die defineLazyGetter() Funktion definiert.

get vs. defineProperty

Das get Schl├╝sselwort und Object.defineProperty() haben ├Ąhnliche Ergebnisse. Es gibt einen kleinen Unterschied zwischen beiden, wenn classes eingesetzt werden.

Wenn get eingesetzt wird, wird die Eigenschaft im Instnaz-Prototyp definiert, w├Ąhrend beim Einsatz von Object.defineProperty() die Eigenschaft auf der Instanz definiert wird.

class Example {
  get hello() {
    return 'world';
  }
}

const obj = new Example();
console.log(obj.hello);
// "world"

console.log(Object.getOwnPropertyDescriptor(obj, 'hello'));
// undefined

console.log(
  Object.getOwnPropertyDescriptor(
    Object.getPrototypeOf(obj), 'hello'
  )
);
// { configurable: true, enumerable: false, get: function get hello() { return 'world'; }, set: undefined }

Spezifikationen

Browserkompatibilit├Ąt

BCD tables only load in the browser

Siehe auch