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 Objekteigenschaft an eine Funktion, die aufgerufen wird, wenn auf diese Eigenschaft zugegriffen wird. Sie kann auch in Klassen verwendet werden.

Probieren Sie es aus

const obj = {
  log: ["a", "b", "c"],
  get latest() {
    return this.log[this.log.length - 1];
  },
};

console.log(obj.latest);
// Expected output: "c"

Syntax

js
{ 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 mit der angegebenen Funktion verknüpft werden soll. Ähnlich wie andere Eigenschaften in Objektinitialisierern kann es sich dabei um einen String-Literal, einen Zahlen-Literal oder einen Bezeichner handeln.

expression

Sie können auch Ausdrücke für einen berechneten Eigenschaftsnamen verwenden, die mit der angegebenen Funktion verknüpft werden sollen.

Beschreibung

Manchmal ist es wünschenswert, Zugriff auf eine Eigenschaft zu erlauben, 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 mithilfe eines Getters erreicht werden.

Eine Objekteigenschaft ist entweder eine Daten-Eigenschaft oder eine Accessor-Eigenschaft, kann jedoch nicht beides gleichzeitig sein. Lesen Sie Object.defineProperty() für weitere Informationen. Die Getter-Syntax erlaubt es, die Getter-Funktion in einem Objektinitialisierer zu spezifizieren.

js
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 sind konfigurierbar und aufzählbar.

Beispiele

Definition eines Getters in neuen Objekten mit Objektinitialisierern

Dies erstellt eine Pseudo-Eigenschaft latest für das Objekt obj, die das letzte Array-Element in log zurückgibt.

js
const obj = {
  log: ["example", "test"],
  get latest() {
    return this.log.at(-1);
  },
};
console.log(obj.latest); // "test"

Beachten Sie, dass ein Versuch, einen Wert zu latest zuzuweisen, keinen Effekt hat.

Verwendung von Gettern in Klassen

Sie können die gleiche Syntax verwenden, um öffentliche Instanz-Getter zu definieren, die in Klasseninstanzen verfügbar sind. In Klassen benötigen Sie kein Komma als Trennzeichen zwischen Methoden.

js
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 sind daher von allen Instanzen der Klasse gemeinsam genutzt. 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:

js
delete obj.latest;

Definition eines Getters auf bestehenden Objekten mit defineProperty

Um einem bestehenden Objekt später jederzeit einen Getter hinzuzufügen, verwenden Sie Object.defineProperty().

js
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

js
const expr = "foo";

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

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

Definition von statischen Gettern

js
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 / sich selbst überschreibende / verzögerte Getter

Getter bieten Ihnen die Möglichkeit, eine Eigenschaft eines Objekts zu definieren, berechnen jedoch den Wert der Eigenschaft erst, wenn darauf zugegriffen wird. Ein Getter verschiebt die Berechnungskosten des Werts, bis der Wert benötigt wird. Falls er nie benötigt wird, entstehen keine Kosten.

Eine zusätzliche Optimierungstechnik, um die Berechnung eines Eigenschaftswerts zu verzögern oder zu verzögern und ihn für späteren Zugriff zwischenzuspeichern, sind intelligente (oder memoisierte) Getter. Der Wert wird beim ersten Aufruf des Getters berechnet und anschließend zwischengespeichert, sodass nachfolgende Zugriffe auf den zwischengespeicherten Wert zurückgreifen, ohne ihn neu zu berechnen. Diese Technik ist in folgenden Situationen nützlich:

  • Wenn die Berechnung eines Eigenschaftswertes teuer ist (viel RAM oder CPU-Zeit benötigt, Worker-Threads startet, eine Remote-Datei abruft usw.).
  • Wenn der Wert jetzt 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 unveränderlichen Wert neu zu berechnen.

Hinweis: Dies bedeutet, dass Sie keinen verzögerten Getter für eine Eigenschaft schreiben sollten, deren Wert Sie erwarten, dass er sich ändert. Ein verzögerter Getter berechnet den Wert nicht neu.

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 eigene Eigenschaft. Beim Abrufen der Eigenschaft wird die Eigenschaft aus dem Objekt entfernt und erneut hinzugefügt, diesmal jedoch implizit als Daten-Eigenschaft. Abschließend wird der Wert zurückgegeben.

js
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 liefert, gibt es einen subtilen 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 selbst definiert wird, auf die sie angewendet wird.

js
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® 2025 Language Specification
# sec-method-definitions

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
get
Computed property names

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch