get

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 Syntaxeinschränkungen:

• Ein Getter muss genau null Parameter haben.

Parameter

prop

Der Name der Eigenschaft, die an die angegebene Funktion gebunden werden soll. Wie bei anderen Eigenschaften in Objektinitialisierern kann es sich um ein String-Literal, ein Zahlenliteral 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.

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 durch die Verwendung eines Getters erreicht werden.

Eine Objekteigenschaft ist entweder eine Dateneigenschaft oder eine Accessoreigenschaft, kann jedoch nicht gleichzeitig beides sein. Lesen Sie Object.defineProperty() für weitere Informationen. Die Getter-Syntax erlaubt 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 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, diesen nicht ändern wird.

Verwendung von Gettern in Klassen

Sie können die exakt gleiche Syntax verwenden, um öffentliche Instanzgetter zu definieren, die auf Klasseninstanzen verfügbar sind. In Klassen benötigen Sie kein Komma als Trennzeichen zwischen 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"

Gettereigenschaften werden auf der prototype-Eigenschaft der Klasse definiert und werden daher von allen Instanzen der Klasse geteilt. Anders als Gettereigenschaften in Objektliteralen sind Gettereigenschaften in Klassen nicht aufzählbar.

Statische Getter und private Getter verwenden ähnliche Syntaxen, die auf den Seiten static und private elements beschrieben sind.

Löschen eines Getters mit dem delete-Operator

Wenn Sie den Getter entfernen möchten, können Sie ihn einfach mit delete löschen:

delete obj.latest;

Definieren eines Getters auf bestehenden Objekten mit defineProperty

Um später jederzeit einen Getter zu einem bestehenden Objekt 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 Gettern

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 geben Ihnen eine Möglichkeit, eine Eigenschaft eines Objekts zu definieren, aber sie berechnen den Wert der Eigenschaft nicht, bis darauf zugegriffen wird. Ein Getter verzögert die Kosten der Berechnung des Wertes, bis der Wert benötigt wird. Wird er nie benötigt, zahlen Sie nie die Kosten.

Eine zusätzliche Optimierungstechnik, um die Berechnung eines Eigenschaftswerts zu verzögern oder diese für den späteren Zugriff zu cachen, sind intelligente (oder memoisierte) Getter. Der Wert wird das erste Mal, wenn der Getter aufgerufen wird, berechnet und dann zwischengespeichert, sodass spätere Zugriffe den zwischengespeicherten Wert zurückgeben, ohne ihn neu zu berechnen. Dies ist in folgenden Situationen nützlich:

• Wenn die Berechnung eines Eigenschaftswerts teuer ist (viel RAM oder CPU-Zeit benötigt, Worker-Threads startet, eine entfernte Datei abruft, etc.).
• Wenn der Wert jetzt nicht benötigt wird, sondern erst später verwendet wird oder in manchen Fällen gar nicht verwendet wird.
• Wenn er verwendet wird, wird er mehrere Male aufgerufen und es besteht keine Notwendigkeit, den Wert neu zu berechnen, wenn er sich nie ändert oder nicht neu berechnet werden sollte.

Im folgenden Beispiel hat das Objekt einen Getter als eigene Eigenschaft. Beim Abrufen der Eigenschaft wird die Eigenschaft vom 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;
  },
};

Funktionserkennung

Viele Funktionen akzeptieren ein Objekt und rufen einzelne Eigenschaften daraus als separate Parameter ab (dieser Objektparameter ist als options bag bekannt). Sie können feststellen, ob eine bestimmte Option unterstützt wird, indem Sie einen Getter verwenden, um zu verfolgen, ob die Eigenschaft abgerufen wurde. Dieses Beispiel überprüft, ob die colorType-Option von der HTMLCanvasElement.getContext() Methode unterstützt wird.

function isColorTypeSupported() {
  let supported = false;
  const obj = {
    get colorType() {
      supported = true;
      return undefined;
    },
  };
  document.createElement("canvas").getContext("2d", obj);
  return supported;
}

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 Klassen verwendet werden. Die get-Syntax definiert die Eigenschaft auf dem Prototyp der Instanz, während 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

Browser-Kompatibilität

Siehe auch

• Arbeiten mit Objekten Leitfaden
• Funktionen
• set
• Object.defineProperty()
• Objektinitialisierer
• class
• Eigenschafts-Accessoren
• Inkompatible Änderung in ES5: literal getter und setter Funktionen müssen jetzt genau null oder ein Argument haben von Jeff Walden (2010)
• Weitere Änderungen in SpiderMonkey: altes, esoterisches, sehr selten verwendetes Syntax zur Erstellung von Gettern und Setzern wird entfernt von Jeff Walden (2010)