Question

我有一个名为

的JavaScript变量

var someProperty;

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

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

我想找出正在改变我尝试使用Chrome开发工具直接在var someProperty上设置断点的属性值的函数，但是收到的值为“undefined” - 这让我相信一个函数正在设置此变量。如何查看或观察此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

谷歌浏览器 - 在javascript对象属性更改时观看

2 个答案: