javascript - 监听 JavaScript 中的变量变化

Question

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

Answer 1

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

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

自 2018 年起，您现在可以使用 Proxy object 来监视(和拦截)对对象所做的更改。它是专门为 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 中不可用。无法完全复制代理功能。
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}}]