如何检测 JavaScript 中的变量变化？

在 JavaScript 中监听变量更改

在 JavaScript 中，通常希望在变量值发生更改时收到通知。这可以使用 2018 年引入的 Proxy 对象来实现。Proxy 对象允许创建拦截属性更改并相应响应的代理。

要使用 Proxy 对象，首先创建一个目标对象观察到：

var targetObj = {};

接下来，使用 Proxy 对象创建代理，指定属性被执行时要执行的回调set:

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 对象有缺点，因为它在较旧的浏览器中不可用，并且对于某些对象可能无法按预期运行。为了观察嵌套对象的变化，可以使用 Observable Slim 等专门的库。

Observable Slim

Observable Slim 是一个为观察嵌套对象变化而设计的库。要使用它，首先创建要观察的对象：

var test = {testing:{}};

然后，使用 Observable Slim 通过 create 函数创建代理，指定发生变化时要执行的回调：

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

以上是如何检测 JavaScript 中的变量变化？的详细内容。更多信息请关注PHP中文网其他相关文章！