get
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die get
-Syntax bindet eine Objekt-Eigenschaft an eine Funktion, die aufgerufen wird, wenn diese Eigenschaft abgefragt wird. Sie kann auch in Klassen verwendet werden.
Probieren Sie es aus
Syntax
{ get prop() { /* … */ } }
{ get [expression]() { /* … */ } }
Es gibt einige zusätzliche Syntaxeinschränkungen:
- Ein Getter muss genau null Parameter haben.
Parameter
prop
-
Der Name der Eigenschaft, die an die gegebene Funktion gebunden werden soll. Wie bei anderen Eigenschaften in Objektinitialisierern kann es ein Stringliteral, ein Zahlenliteral oder ein Bezeichner sein.
expression
-
Sie können auch Ausdrücke für einen berechneten Eigenschaftsnamen verwenden, um ihn an die gegebene Funktion zu binden.
Beschreibung
Manchmal ist es wünschenswert, den Zugriff auf eine Eigenschaft zu ermöglichen, die einen dynamisch berechneten Wert zurückgibt, oder Sie möchten den Status einer internen Variablen widerspiegeln, ohne explizite Methodenaufrufe zu erfordern. In JavaScript kann dies mit der Verwendung eines Getters erreicht werden.
Eine Objekteigenschaft ist entweder eine Dateneigenschaft oder eine Zugriffseigenschaft, aber sie kann nicht gleichzeitig beides sein. Lesen Sie Object.defineProperty()
für weitere Informationen. Die Getter-Syntax ermöglicht es Ihnen, die Getter-Funktion in einem Objektinitialisierer anzugeben.
const obj = {
get prop() {
// getter, the code executed when reading obj.prop
return someValue;
},
};
Eigenschaften, die mit dieser Syntax definiert werden, sind eigene Eigenschaften des erstellten Objekts und sie sind konfigurierbar und aufzählbar.
Beispiele
Definieren eines Getters für neue Objekte in Objektinitialisierern
Dies wird eine Pseudo-Eigenschaft latest
für das Objekt obj
erstellen, die das letzte Array-Element in log
zurückgibt.
const obj = {
log: ["example", "test"],
get latest() {
return this.log.at(-1);
},
};
console.log(obj.latest); // "test"
Beachten Sie, dass der Versuch, latest
einen Wert zuzuweisen, ihn nicht ändern wird.
Verwendung von Gettern in Klassen
Sie können dieselbe Syntax verwenden, um öffentliche Instanzgetter zu definieren, die in Klasseninstanzen verfügbar sind. In Klassen benötigen Sie kein Komma als Trennzeichen zwischen den Methoden.
class ClassWithGetSet {
#msg = "hello world";
get msg() {
return this.#msg;
}
set msg(x) {
this.#msg = `hello ${x}`;
}
}
const instance = new ClassWithGetSet();
console.log(instance.msg); // "hello world"
instance.msg = "cake";
console.log(instance.msg); // "hello cake"
Getter-Eigenschaften sind auf der prototype
-Eigenschaft der Klasse definiert und werden daher von allen Instanzen der Klasse geteilt. Im Gegensatz zu Getter-Eigenschaften in Objektliteralen sind Getter-Eigenschaften in Klassen nicht aufzählbar.
Statische Getter und private Getter verwenden ähnliche Syntaxen, die auf den Seiten zu static
und privaten Eigenschaften beschrieben werden.
Löschen eines Getters mit dem delete
Operator
Wenn Sie den Getter entfernen möchten, können Sie ihn einfach löschen
:
delete obj.latest;
Definieren eines Getters für bestehende Objekte mit defineProperty
Um einem bestehenden Objekt später zu einem beliebigen Zeitpunkt einen Getter hinzuzufügen, verwenden Sie Object.defineProperty()
.
const o = { a: 0 };
Object.defineProperty(o, "b", {
get() {
return this.a + 1;
},
});
console.log(o.b); // Runs the getter, which yields a + 1 (which is 1)
Verwendung eines berechneten Eigenschaftsnamens
const expr = "foo";
const obj = {
get [expr]() {
return "bar";
},
};
console.log(obj.foo); // "bar"
Definieren statischer Getter
class MyConstants {
static get foo() {
return "foo";
}
}
console.log(MyConstants.foo); // 'foo'
MyConstants.foo = "bar";
console.log(MyConstants.foo); // 'foo', a static getter's value cannot be changed
Intelligente / selbstüberschreibende / verzögerte Getter
Getter bieten Ihnen eine Möglichkeit, eine Eigenschaft eines Objekts zu definieren, aber sie berechnen den Wert der Eigenschaft erst, wenn er abgefragt wird. Ein Getter verzögert die Kosten der Berechnung des Wertes, bis der Wert benötigt wird. Wenn er nie benötigt wird, entstehen auch keine Kosten.
Eine zusätzliche Optimierungstechnik, um die Berechnung eines Eigenschaftswertes zu verzögern oder zu verzögern und für den späteren Zugriff zwischenzuspeichern, sind intelligente (oder memoisierte) Getter. Der Wert wird beim ersten Aufruf des Getters berechnet und dann zwischengespeichert, sodass nachfolgende Zugriffe den zwischengespeicherten Wert ohne erneute Berechnung zurückgeben. Dies ist in den folgenden Situationen nützlich:
- Wenn die Berechnung eines Eigenschaftswertes aufwendig ist (viel RAM oder CPU-Zeit in Anspruch nimmt, Arbeitsthreads erzeugt, eine Remote-Datei abruft usw.).
- Wenn der Wert gerade nicht benötigt wird. Er wird später verwendet, oder in manchen Fällen wird er überhaupt nicht verwendet.
- Wenn er verwendet wird, wird er mehrmals abgerufen und es besteht keine Notwendigkeit, den Wert, der sich nie ändern wird oder nicht neu berechnet werden sollte, erneut zu berechnen.
Hinweis: Dies bedeutet, dass Sie keinen verzögerten Getter für eine Eigenschaft schreiben sollten, deren Wert Sie erwarten zu ändern, da der Getter, wenn er verzögert ist, den Wert nicht neu berechnet.
Beachten Sie, dass Getter von Natur aus nicht "verzögert" oder "memoisiert" sind; Sie müssen diese Technik implementieren, wenn Sie dieses Verhalten wünschen.
Im folgenden Beispiel hat das Objekt einen Getter als seine eigene Eigenschaft. Beim Abrufen der Eigenschaft wird diese Eigenschaft aus dem Objekt entfernt und erneut hinzugefügt, diesmal jedoch implizit als Dateneigenschaft. Schließlich wird der Wert zurückgegeben.
const obj = {
get notifier() {
delete this.notifier;
this.notifier = document.getElementById("bookmarked-notification-anchor");
return this.notifier;
},
};
get vs. defineProperty
Während die Verwendung des get
-Schlüsselworts und Object.defineProperty()
ähnliche Ergebnisse hat, besteht ein subtiler Unterschied zwischen den beiden, wenn sie auf classes
angewendet werden.
Bei der Verwendung von get
wird die Eigenschaft auf dem Prototyp der Instanz definiert, während bei der Verwendung von Object.defineProperty()
die Eigenschaft auf der Instanz definiert wird, auf die sie angewendet 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
Specification |
---|
ECMAScript Language Specification # sec-method-definitions |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Arbeiten mit Objekten Leitfaden
- Funktionen
set
Object.defineProperty()
- Objektinitialisierer
class
- Eigenschaftszugriffsberechtiger
- Inkompatible ES5-Änderung: Literal-Getter- und Setter-Funktionen müssen jetzt genau null oder ein Argument haben von Jeff Walden (2010)
- Weitere SpiderMonkey-Änderungen: Alte, esoterische, sehr selten verwendete Syntax für die Erstellung von Gettern und Settern wird entfernt von Jeff Walden (2010)