监听器在javascript对象中更改属性值

Question

通过javascript文档,我发现javascript对象上的以下两个函数看起来很有趣:

.watch - 为属性分配值并在发生时运行函数.
.unwatch - 使用watch方法删除观察点集.

样品用法:

o = { p: 1 };
o.watch("p", function (id,oldval,newval) {
    console.log("o." + id + " changed from " + oldval + " to " + newval)
    return newval;
});

每当我们更改"p"的属性值时,此函数都会被触发.

o.p = 2;   //logs: "o.p changed from 1 to 2"

我在过去的几年里一直在使用javascript,从未使用过这些函数.
有人可以抛出一些好的用例,这些功能会派上用场吗？

Answer 1

现在是2018年，这个问题的答案有点过时了：

• Object.watch和Object.observe均已弃用，不应使用。
• onPropertyChange是一个DOM元素事件处理程序，仅在某些版本的IE中有效。
• Object.defineProperty允许您使对象属性不可变，这将使您能够检测到尝试的更改，但它也会阻止任何更改。
• 定义setter和getters是可行的，但是它需要大量的设置代码，并且在需要删除或创建新属性时效果不佳。

今天，您现在可以使用代理对象来监视（和拦截）对对象所做的更改。它是为OP要做的目的而专门设计的。这是一个基本示例：

var targetObj = {};
var targetProxy = new Proxy(targetObj, {
  set: function (target, key, value) {
      console.log(`${key} set to ${value}`);
      target[key] = value;
      return true;
  }
});

targetProxy.hello_world = "test"; // console: 'hello_world set to test'

该Proxy对象的唯一缺点是：

1. 该Proxy对象在较旧的浏览器（例如IE11）中不可用，并且polyfill无法完全复制Proxy功能。
2. 代理对象在特殊对象（例如Date）上的行为并不总是如预期的那样- Proxy最好与普通对象或数组配对。

如果需要观察对嵌套对象所做的更改，则需要使用专门的库，例如Observable Slim（由我编写）。它是这样的：

var test = {testing:{}};
var p = ObservableSlim.create(test, true, function(changes) {
    console.log(JSON.stringify(changes));
});

p.testing.blah = 42; // console:  [{"type":"add","target":{"blah":42},"property":"blah","newValue":42,"currentPath":"testing.blah",jsonPointer:"/testing/blah","proxy":{"blah":42}}]

Answer 2

真正设计的手表是属性值的验证.例如,您可以验证某些内容是否为整数:

obj.watch('count', function(id, oldval, newval) {
    var val = parseInt(newval, 10);
    if(isNaN(val)) return oldval;
    return val;
});

您可以使用它来验证字符串长度:

obj.watch('name', function(id, oldval, newval) {
    return newval.substr(0, 20);
});

但是,这些仅在最新版本的SpiderMonkey javascript引擎中可用. 如果您使用的是Jaxer或嵌入SpiderMonkey引擎,但在您的浏览器中尚未实际可用(除非您使用的是FF3),这很棒.

Answer 3

签出Object.defineProperty和 Object.prototype.\__defineGetter__(或\__defineSetter__)查看此功能的标题.

Object.defineProperty 应该很快就可以在所有现代浏览器中使用.