javascript - 在对象属性访问/读取上添加事件监听器

Question

有没有办法为全局对象属性的访问添加事件监听器？不是在调用函数时，而是在实际读取属性时。

举个例子，假设我想监控对window.screen 的所有访问。

我不想更改现有行为 - console.log(window.screen.availWidth) 应该仍然有效。但是，我想在读取时调用另一个函数。

Answer 1

这样做有点奇怪，但这是可能的 - 如果该属性是可配置的，您可以将其更改为 getter/setter，其中 getter 调用您自己的函数，然后运行原始功能。

window.screen 已经是一个 getter/setter，所以首先保存对原始 getter/setter 函数的引用:

const { get: origGet, set: origSet } = Object.getOwnPropertyDescriptor(window, 'screen');
Object.defineProperty(window, 'screen', {
  get() {
    console.log('Running custom code for window.screen getter!');
    return origGet.call(window);
  },
  set(param) {
    console.log('Running custom code for window.screen setter!');
    return origSet.call(window, param);
  }
});

console.log(window.screen);

(在这种特殊情况下，内置的 setter 似乎实际上没有做任何事情)