Javascript : How to detect when the reference of a variable changes

Question

我目前正在编写一个工具，使用 Proxy 监视对对象所做的更改。 .所以我有一个函数 watchObject，它将一个对象作为参数并将其包装在一个 Proxy 中，其中对应于对象调用 debugger; 更改的处理程序；。此 watchObject 主要基于此 question 的已接受答案.

在get、defineProperty 和deleteProperty 处理程序上设置陷阱在仅修改对象时效果很好。
然而，当引用被替换时，处理程序不会被调用并且围绕它的代理会丢失。

让我们考虑一个包含键 foo 的对象 a:
var a = { foo: "bar"};

例如，以下将调用我的陷阱内的调试器断点:

• a.foo = "你好"
• 删除 a.foo
• a.baz = "嗨"等等……

但之后调用它:a = {keyOne: "one"} 将不会触发断点并且后续调用上述示例(否则会触发断点)将不再调用断点.

所以我想知道是否有一种方法可以检测像这样的操作:完成a = {keyOne: "one"} 以便监视变量的引用更改并能够在新引用的对象上重新创建代理对象。

此外，由于监视对象更改的整个过程旨在使调试更容易，因此解决方案必须对所涉及的代码无损。
使用 Proxy 非常好，因为它只会拦截而不会改变包装对象的整体行为。

Answer 1

我想试一试...

看起来您想捕获对象本身而不是方法。

由于对象的变量将被设置为窗口或另一个对象的属性，我们可以使用函数在窗口(或该对象)上使用所需的变量名称定义 getter 和 setter:

function trackedProxy(name, val, _this){
    let handler = {} // place your property traps here
    let _privateObject = val
    let _privateProxy = new Proxy(_privateObject, handler)

    Object.defineProperty(_this, name, {
    get: function() {
      return _privateProxy;
    },
    set: function(value) {
        console.log("object changed")
        // Do something
        return _privateObject = value;
    }
  });
}

//build one with invocation of the function, but do not set as equal to a var or you will have the same issue. 
//**bad! - var a = trackedProxy('a',{keyOne: "one"},this)
trackedProxy('a',{ foo: "bar"}, this)

console.log(a)
//Proxy{ foo: "bar"}

a={keyOne: "one"}
//Object changed

console.log(a)
//Proxy{keyOne: "one"}

请记住，您不能在执行此操作后重新定义窗口上的属性。

希望对您有所帮助:)