set

**set** 语法将对象属性绑定到一个函数，当尝试设置该属性时将调用该函数。它也可以在 类 中使用。

试一试

语法

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

有一些额外的语法限制

  • setter 必须只有一个参数。

参数

prop

要绑定到给定函数的属性名称。与 对象初始化器 中的其他属性一样，它可以是字符串字面量、数字字面量或标识符。

val

保存尝试分配给 prop 的值的变量的别名。

表达式

您还可以使用表达式作为计算属性名称来绑定到给定函数。

描述

在 JavaScript 中，setter 可用于在尝试更改属性值时执行函数。setter 通常与 getter 一起使用。

对象属性要么是数据属性，要么是访问器属性，但不能同时是两者。有关更多信息，请阅读 Object.defineProperty()。setter 语法允许您在对象初始化器中指定 setter 函数。

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

使用此语法定义的属性是创建的对象的自身属性，并且它们是可配置的和可枚举的。

示例

在对象初始化器中为新对象定义 setter

以下示例定义了对象 language 的伪属性 current。当 current 被分配一个值时，它会使用该值更新 log。

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']

请注意，current 未定义，任何尝试访问它的操作都会导致 undefined。

在类中使用 setter

您可以使用完全相同的语法来定义可用于类实例的公共实例 setter。在类中，您不需要在方法之间使用逗号分隔符。

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"

setter 属性在类的 prototype 属性上定义，因此由类的所有实例共享。与对象字面量中的 setter 属性不同，类中的 setter 属性不可枚举。

静态 setter 和私有 setter 使用类似的语法，这些语法在 static 和 私有属性 页面中描述。

使用 delete 运算符删除 setter

如果您想删除 setter，您可以 delete 它。

js
delete language.current;

使用 defineProperty 在现有对象上定义 setter

要将 setter 附加到现有对象，请使用 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

使用计算属性名称

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"

规范

规范
ECMAScript 语言规范
# sec-method-definitions

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅