监听 JavaScript 中的变量变化

Question

当某个变量的值发生变化时，是否可以在 JS 中触发一个事件？接受 JQuery。

原文由 rashcroft22 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这个问题最初是在 2009 年发布的，大多数现有答案要么过时、无效，要么需要包含大型臃肿的库：

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

自 2018 年起， 您现在可以使用 Proxy 对象 来监视（和拦截）对对象所做的更改。它专为 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}}]

原文由 Elliot B. 发布，翻译遵循 CC BY-SA 4.0 许可协议