set

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 set-Syntax bindet eine Objekt-Eigenschaft an eine Funktion, die aufgerufen wird, wenn versucht wird, diese Eigenschaft zu setzen. Sie kann auch in Klassen verwendet werden.

Probieren Sie es aus

Syntax

js
{ set prop(val) { /* … */ } }
{ set [expression](val) { /* … */ } }

Es gibt einige zusätzliche Syntaxbeschränkungen:

  • Ein Setter muss genau einen Parameter haben.

Parameter

prop

Der Name der Eigenschaft, die mit der gegebenen Funktion gebunden werden soll. Wie bei anderen Eigenschaften in Objektinitialisierern, kann es sich um einen Zeichenfolgenliteral, einen Zahlenliteral oder einen Bezeichner handeln.

val

Ein Alias für die Variable, die den Wert hält, der versucht wird, zu prop zugewiesen zu werden.

expression

Sie können auch Ausdrücke für einen berechneten Eigenschaftsnamen verwenden, um ihn mit der gegebenen Funktion zu binden.

Beschreibung

In JavaScript kann ein Setter verwendet werden, um eine Funktion auszuführen, wann immer versucht wird, den Wert einer Eigenschaft zu ändern. Setzer werden meistens in Verbindung mit Getter verwendet.

Eine Objekteigenschaft ist entweder eine Daten-Eigenschaft oder eine Zugriffseigenschaft, aber sie kann nicht gleichzeitig beides sein. Lesen Sie Object.defineProperty() für weitere Informationen. Die Setzer-Syntax ermöglicht Ihnen die Angabe der Setter-Funktion in einem Objekt-Initializer.

js
const obj = {
  set prop() {
    // setter, the code executed when setting obj.prop
  },
}

Eigenschaften, die mit dieser Syntax definiert werden, sind eigene Eigenschaften des erstellten Objekts und sie sind konfigurierbar und aufzählbar.

Beispiele

Definieren eines Setzers in neuen Objekten in Objekt-Initialisierern

Das folgende Beispiel definiert eine Pseudo-Eigenschaft current des Objekts language. Wenn current ein Wert zugewiesen wird, wird log mit diesem Wert aktualisiert:

js
const language = {
  set current(name) {
    this.log.push(name);
  },
  log: [],
};

language.current = "EN";
console.log(language.log); // ['EN']

language.current = "FA";
console.log(language.log); // ['EN', 'FA']

Beachten Sie, dass current nicht definiert ist, und alle Zugriffsversuche darauf zu undefined führen.

Verwenden von Setzern in Klassen

Sie können dieselbe Syntax verwenden, um öffentliche Instanzsetter zu definieren, die in Klasseninstanzen verfügbar sind. In Klassen benötigen Sie nicht das Komma-Trennzeichen zwischen den 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"

Setzer-Eigenschaften werden auf der prototype-Eigenschaft der Klasse definiert und sind somit für alle Instanzen der Klasse gemeinsam. Im Gegensatz zu Setzer-Eigenschaften in Objektliteralen sind Setzer-Eigenschaften in Klassen nicht aufzählbar.

Statische Setzer und private Setzer verwenden ähnliche Syntaxen, die auf den Seiten static und private Eigenschaften beschrieben werden.

Entfernen eines Setzers mit dem delete-Operator

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

js
delete language.current;

Definieren eines Setzers in bestehenden Objekten mit defineProperty

Um einem bestehenden Objekt einen Setzer hinzuzufügen, verwenden Sie Object.defineProperty().

js
const o = { a: 0 };

Object.defineProperty(o, "b", {
  set(x) {
    this.a = x / 2;
  },
});

o.b = 10;
// Runs the setter, which assigns 10 / 2 (5) to the 'a' property

console.log(o.a); // 5

Verwenden eines berechneten Eigenschaftsnamens

js
const expr = "foo";

const obj = {
  baz: "bar",
  set [expr](v) {
    this.baz = v;
  },
};

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

obj.foo = "baz";
// Run the setter

console.log(obj.baz); // "baz"

Spezifikationen

Specification
ECMAScript Language Specification
# sec-method-definitions

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch