如何在 JavaScript 中监听变量变化

在JavaScript中，监听变量变化的需求非常普遍。以下是如何使用Proxy对象来实现这一功能的详细说明。

使用Proxy对象监听对象变化

Proxy对象允许你创建一个代理来包装目标对象，从而拦截和定义对该对象的基本操作（例如属性查找、赋值、枚举、函数调用等）。这是一个基本示例：

var targetObj = {};
var targetProxy = new Proxy(targetObj, {
  set: function (target, key, value) {
      console.log(`${key} 被设置为 ${value}`);
      target[key] = value;
      return true;
  }
});

targetProxy.hello_world = "测试"; // 控制台输出: 'hello_world 被设置为 测试'

在这个示例中，每当targetProxy的属性被设置时，都会触发set处理器，从而输出变化信息。

Proxy对象的优缺点

优点：

• 精确监控：可以拦截和监视对对象的所有操作。
• 灵活性高：可以根据需要自定义各种操作的处理方式。

缺点：

• 兼容性问题：在一些旧浏览器（如IE11）中不可用，且无法通过polyfill完全模拟其功能。
• 特殊对象处理：对一些特殊对象（如Date对象）的行为可能无法预期，通常与普通对象或数组一起使用效果最佳。

处理嵌套对象的变化

对于需要监听嵌套对象的变化，可以使用像 Observable Slim 这样的专门库。这个库可以处理复杂的嵌套对象，并在对象发生变化时触发回调函数：

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

p.testing.blah = 42; // 控制台输出:  [{"type":"add","target":{"blah":42},"property":"blah","newValue":42,"currentPath":"testing.blah","jsonPointer":"/testing/blah","proxy":{"blah":42}}]