如何有效跟踪 JavaScript 中的变量变化？

监听 JavaScript 中的变量更改

在 JavaScript 中，无论是出于调试还是其他目的，通常需要跟踪变量的更改。虽然 Object.watch 和 Object.observe 等旧方法已经过时，但新的解决方案已经出现，提供了更强大、更有效的功能。

代理：现代方法

引入在 ES6 中，Proxy 对象允许您包装现有对象并拦截对其属性所做的更改。这使得它非常适合监视变量更改：

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

当您在代理对象上设置属性时（例如，targetProxy.hello_world =“test”），setter 函数将被触发并将更改记录到console.

观察复杂对象

代理并不总是适合嵌套对象。对于这些情况，Observable Slim 等库提供了专门的解决方案。 Observable Slim 在你的对象周围创建一个反应式包装器，跟踪变化并在事件发生时触发事件：

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

p.testing.blah = 42; // Logs properties and changes in JSON format

注意事项

• 代理在较旧的浏览器。
• 日期等特殊对象可能无法按预期运行代理。
• 对于复杂对象，建议使用像 Observable Slim 这样的专门库。

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