谷歌浏览器 - 当 javascript 对象属性发生变化时观察 [重复]

Question

我有一个名为

的 JavaScript 变量

var someProperty;

在线，假设10000（它是一个巨大的js文件），我有一个函数

function updateTime() {
     console.log(someProperty.time); //i actually get an value here
}

我想找出更改属性值的函数我尝试直接在该 var someProperty 上使用 Chrome 开发工具设置断点，但收到的值为“未定义” - 这让我相信一个函数正在设置这个变量。如何查找或查看此 someProperty.time 属性的设置位置？

Answer 1

这是一个可能的解决方案

var someProp = {
  time: 'give me'
};

Object.defineProperty(someProp, 'time', {
  set: function(time) {
    this.__time = time
    console.log('Method1: Getting time from:',arguments.callee.caller)
  },
  get: function() {
    return this.__time;
  }
});

(function ILikeChanges() {
  someProp.time = 'changes';
})()

Answer 2

另一个现代解决方案是使用Proxy 对象来包装您的对象，这将使您能够添加侦听器以更新您的对象。

在set 函数中，我们使用console.trace 打印一个完整的堆栈跟踪，它将引导您到调用函数。

MDN Proxy

const watchObject = obj => new Proxy(obj, {
  set(target, key, value) {
    console.trace('set', { key, value })
    return target[key] = value
  }
});
// wrap the object with our proxy
const someProperty = watchObject({ time: new Date })

function setTime() {
  someProperty.time = new Date
}
// call the function that changes the state
setTime()
// look in your console for the call stack