Baseline Widely available
Die get
-Syntax bindet eine Objekteigenschaft an eine Funktion, die aufgerufen wird, wenn diese Eigenschaft abgefragt wird. Sie kann auch in Klassen verwendet werden.
const obj = {
log: ["a", "b", "c"],
get latest() {
return this.log[this.log.length - 1];
},
};
console.log(obj.latest);
// Expected output: "c"
Syntax
{ get prop() { /* ⦠*/ } }
{ get [expression]() { /* ⦠*/ } }
Es gibt einige zusätzliche Syntaxbeschränkungen:
prop
Der Name der Eigenschaft, die an die gegebene Funktion gebunden werden soll. Ebenso wie andere Eigenschaften in Objektinitialisierern kann es ein String-Literal, ein Zahlenliteral oder ein Bezeichner sein.
expression
Sie können auch Ausdrücke für einen berechneten Eigenschaftsnamen verwenden, um die gegebene Funktion zu binden.
Manchmal ist es wünschenswert, Zugriff auf eine Eigenschaft zu ermöglichen, die einen dynamisch berechneten Wert zurückgibt, oder man möchte den Status einer internen Variablen widerspiegeln, ohne explizite Methodenaufrufe zu benötigen. In JavaScript kann dies mit einem Getter erreicht werden.
Eine Objekteigenschaft ist entweder eine Dateneigenschaft oder eine Zugriffseigenschaft, kann aber 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 zu spezifizieren.
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 auflistbar.
Beispiele Definieren eines Getters auf neuen Objekten in ObjektinitialisierernDies wird eine Pseudoeigenschaft latest
für das Objekt obj
erstellen, die das letzte Array-Element in log
zurückgeben wird.
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.
Sie können die exakt gleiche Syntax verwenden, um öffentliche Instanz-Getter zu definieren, die auf Klasseninstanzen verfügbar sind. In Klassen brauchen 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 werden auf der prototype
-Eigenschaft der Klasse definiert und werden somit von allen Instanzen der Klasse geteilt. Im Gegensatz zu Getter-Eigenschaften in Objektliteralen sind Getter-Eigenschaften in Klassen nicht auflistbar.
Statische Getter und private Getter verwenden ähnliche Syntaxen, die auf den Seiten zu static
und private elements beschrieben sind.
delete
-Operator
Wenn Sie den Getter entfernen möchten, können Sie ihn einfach mit delete
entfernen:
defineProperty
Um später jederzeit einem vorhandenen Objekt 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 Eigenschaftsnamen
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 / faule Getter
Getter bieten Ihnen eine Möglichkeit, eine Eigenschaft eines Objekts zu definieren, berechnen jedoch den Wert der Eigenschaft erst, wenn auf sie zugegriffen wird. Ein Getter verzögert die Berechnungskosten 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 verschieben und ihn für späteren Zugriff im Cache zu speichern, sind intelligente (oder memoisierte) Getter. Der Wert wird das erste Mal berechnet, wenn der Getter aufgerufen wird, und wird dann im Cache gespeichert, sodass nachfolgende Zugriffe den zwischengespeicherten Wert ohne Neuberechnung zurückgeben. Dies ist in folgenden Situationen nützlich:
Hinweis: Das bedeutet, dass Sie keinen faulen Getter für eine Eigenschaft schreiben sollten, deren Wert Sie erwarten, dass er sich ändert, da der Getter, wenn er faul ist, den Wert nicht neu berechnet.
Beachten Sie, dass Getter von Natur aus nicht "faul" oder "memoisiert" sind; Sie müssen diese Technik implementieren, wenn Sie dieses Verhalten wünschen.
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. 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 haben, gibt es einen subtilen Unterschied zwischen beiden, wenn sie in classes
verwendet 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 Browser-Kompatibilität Siehe auch
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4