setter

blog

set语法把对象的某个属性绑定到一个函数上,当设置该属性的时候执行这个函数

语法

{set prop(val) { . . . }}
{set [expression](val) { . . . }}

参数

prop

需要绑定到函数的属性名

val

一个变量的别名,它的值就是想要赋值给 prop 属性的值.

表达式

从ECMAScript 6 开始,你可以使用一个表达式来得到一个计算后的属性名来绑定所给的函数.

描述

在JavaScript里,一个setter可以实现当指定的属性试图被改变的时候执行一个函数.Setter通常和getter结合使用来创建一个伪状态.属性的setter不能给该属性一个确定的属性值.

使用 set 的时候需要注意一下几点:

  • 它可以拥有一个id,id可以是数字也可以是字符串
  • 它必须拥有一个参数.不能少也不能多(查看更多)
  • 在对象字面量里,一个属性只能有一个setter,并且setter绑定函数的属性不能再指定它的值,反之亦然.({ set x(v) { }, set x(v) { } } and { x: …, set x(v) { } } 类似于这样的是不行的.)

setter可以通过 delete 方法删除

栗子

在对象初始化的时候给属性添加setter

这会给 o 对象添加一个名为 current 的伪属性,每当它被分配属性值的时候, log 属性会被更新,被分配的属性值会被记录.

var o = {
  set current (str) {
    this.log[this.log.length] = str;
  },
  log: []
}

console.log(o.current);
o.current = 1;
console.log(o.log);
o.current = 2;
console.log(o.log);

注意,current属性并没有被定义,试图访问它会得到undefined.Note that current is not defined and any attempts to access it will result in undefined.

使用 delete 操作来删除setter

如果你想把setter删除,只需要使用 delete 就行了.

delete o.current;

使用 defineProperty 给一个既存的对象添加setter

想要在任何时间给一个既存的对象添加setter ,可以通过Object.defineProperty()

var o = { a:0 };

Object.defineProperty(o, "b", { set: function (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

使用计算后的属性名

注意: 计算后的属性名属于试验中技术, ECMAScript 6 的目标的一部分, 还没有被浏览器广泛支持. 在不支持的环境下会触发语法错误.
(经过测试,在目前的chrome里是可以用的.)

var expr = "foo";

var 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"

查看原文