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

{ get prop() { /* … */ } }
{ get [expression]() { /* … */ } }

Es gibt einige zusätzliche Syntax-Beschränkungen:

Ein Getter muss genau null Parameter haben.

Parameter

prop: Der Name der Eigenschaft, die an die gegebene Funktion gebunden werden soll. Wie andere Eigenschaften in Objektinitialisierungen kann es sich um ein String-Literal, ein Zahlen-Literal oder einen Bezeichner handeln.
expression: Sie können auch Ausdrücke für einen berechneten Eigenschaftsnamen verwenden, um ihn an die gegebene Funktion zu binden.

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 verwenden zu müssen. In JavaScript kann dies mit der Verwendung eines Getters erreicht werden.

Eine Objekteigenschaft ist entweder eine Dateneigenschaft oder eine Zugriffseigenschaft, kann aber nicht beides gleichzeitig sein. Lesen Sie Object.defineProperty() für mehr Informationen. Die Getter-Syntax ermöglicht es Ihnen, die Getter-Funktion in einem Objekt-Initializer 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 aufzählbar.

Beispiele

Definieren eines Getters bei neuen Objekten in Objektinitialisierungen

Dies erzeugt eine Pseudo-Eigenschaft latest für das Objekt obj, 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, diesen nicht ändert.

Verwendung von Getters in Klassen

Sie können die genau gleiche Syntax verwenden, um öffentliche Instanz-Getters zu definieren, die für Klasseninstanzen verfügbar sind. In Klassen benötigen Sie das Komma nicht 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 static und private properties 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 bei bestehenden Objekten mit `defineProperty`

Um einem bestehenden Objekt zu einem späteren 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 von statischen Getters

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 Getters

Getters geben Ihnen die Möglichkeit, eine Eigenschaft eines Objekts zu definieren, aber sie berechnen den Wert der Eigenschaft erst, wenn darauf zugegriffen wird. Ein Getter verschiebt die Kosten der Berechnung des Wertes, bis der Wert benötigt wird. Wenn 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 zu cachen, sind intelligente (oder memoisierte) Getters. Der Wert wird beim ersten Mal berechnet, wenn der Getter aufgerufen wird, und danach zwischengespeichert, sodass 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 (viel RAM oder CPU-Zeit benötigt, Worker-Threads erzeugt, entfernte Dateien abruft usw.).
Wenn der Wert jetzt gerade nicht benötigt wird. Er wird später verwendet oder in einigen Fällen überhaupt nicht.
Wenn er verwendet wird, wird er mehrmals abgerufen und es besteht keine Notwendigkeit, den Wert erneut zu berechnen, da er sich nie ändern wird oder nicht geändert werden sollte.

Hinweis: Das bedeutet, dass Sie keinen verzögerten Getter für eine Eigenschaft schreiben sollten, deren Wert Sie erwarten, dass er sich ändert, denn wenn der Getter verzögert ist, wird er den Wert nicht neu berechnen.

Beachten Sie, dass Getters 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, aber diesmal 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

Obwohl die Verwendung des get-Schlüsselworts und von Object.defineProperty() ähnliche Ergebnisse liefert, gibt es einen subtilen Unterschied zwischen den beiden, wenn sie in Klassen verwendet werden.

Bei der Verwendung von get wird die Eigenschaft auf dem Prototyp der Instanz definiert, während die Verwendung von Object.defineProperty() die Eigenschaft auf der Instanz definiert, 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® 2025 Language Specification # sec-method-definitions

Browser-Kompatibilität

BCD tables only load in the browser

get