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