检测javascript中的变量何时更改

Question

我有一个 chrome 应用程序，我想在分辨率更改时正确调整大小（尺寸与屏幕宽度成正比）。我已经编写了一个函数，可以用正确的尺寸重绘应用程序，现在我只想在需要时执行它。

分辨率改变会导致 screen.width 改变，但是（可能并不奇怪，因为它们与不同的事物相关）“resize”事件没有被触发，而且据我所知没有任何事件被触发。

我知道代理对象 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)，所以我编写了一些代码来检测何时设置变量并执行我的回调，这似乎有效，但在分辨率更改的实例中无效。

所以我在网上搜索并尝试了这个https://gist.github.com/eligrey/384583（这基本上是关于类似主题的几个 stackoverflow 问题中提供的答案，并且确实是我最初制作的，尽管缺乏新的 Proxy 对象提供的抽象）。

这似乎也有效（从某种意义上说，如果我说在完成 screen.watch("width", () => console.log("hello")); 然后执行 screen.width 之后手动设置 screen.width。 width = 100；我的回调被执行）。但不是在分辨率更改的情况下（事实上，也许最重要的是，分配这个观察者似乎可以防止 screen.width 被分配）。

我有三个问题

1) 当我分配一个观察者/代理时会发生什么事情搞砸了。

2) 我怎样才能知道浏览器在这个细节级别上正在做什么（什么发送触发器来更改 screen.width？我猜是操作系统，这是什么样子的）

3) 有没有更好的方法来实现我最初的目标（Chrome 应用调整大小）。

我主要对问题 1) 感兴趣，不再关心 3)。

复制我的问题，

• 在 Firefox 或 chrome 中打开一个新标签
• 转到开发者控制台。
• 检查screen.width，改变分辨率，观察screen.width的变化
• 从https://gist.github.com/eligrey/384583复制并粘贴代码
• 执行 screen.watch("width", (id, oldval, newval) => {console.log("hello"); return newval;});
• 做screen.width = 100;并观察 hello 已记录并且 screen.width 设置为 100
• 更改分辨率，观察 screen.width 没有设置。

编辑 - 正如 Bertrand 的回答后所揭示的那样，resize 事件实际上可能会在分辨率更改时触发，但这似乎是对分辨率更改的响应，迫使窗口的边界变小，如果窗口很小，那么screen.width 可以在不触发调整大小事件的情况下更改。

Answer 1

当我分配一个搞砸的观察者/代理时会发生什么。

问题在于width 属性实际上是Screen.prototype 上的getter。这不是window.screen上的普通值：

console.log(window.screen.width);
console.log(window.screen.hasOwnProperty('width'));

// The property exists on the prototype instead, and is a getter:
const descriptor = Object.getOwnPropertyDescriptor(Screen.prototype, 'width');
console.log(descriptor);

如果width 属性是普通 属性，仅由浏览器通过evaling 设置的普通值组成

window.screen.width = 1500

然后代理或Object.watch polyfill 将起作用，因为您将能够拦截对.width 属性的分配。这就是为什么您在将自己的 setter 分配给 window.screen.width 后看到的原因：

执行screen.width = 100; 并观察 hello 已记录并且 screen.width 设置为 100

它向您显示hello - 您正在调用之前分配给window 的screen 属性的setter。相反，由于本机内置属性不是由浏览器分配的普通值，因此当屏幕更改时，您的 hello 不会被记录。情况是 bit 类似于本示例 sn-p 中发生的情况：

const obj = (() => {
  let privateVal = 'propOriginal';
  // privateVal changes after 500ms:
  setTimeout(() => {
    console.log('Changing privateVal to propChanged');
    privateVal = 'propChanged';
  }, 500);
  
  // Return an object which has a getter, which returns privateProp:
  return {
    get privateProp() {
      return privateVal;
    }
  };
})();

// At this point, if one only has a reference to `obj`,
// there is no real way to watch for changes to privateVal:
console.log(obj.privateProp);

// Assigning a custom setter to obj.privateProp
// will only result in observing attempted assignments to obj.privateProp
// but will not be able to observe the change to privateVal:

Object.defineProperty(obj, 'privateProp', { set(newVal) {
  console.log('Observed change: new value is ' + newVal);
}});

setTimeout(() => {
  obj.privateProp = 1000;
}, 2500);

如您所见，在外部作用域中添加到obj 的setter 函数无法捕获对privateVal 的更改。这不是确切window.screen 发生的事情，但它是相似的；您无权访问导致调用内置 getter 返回的值发生更改的底层代码结构。

---

screen 上的内置 getter 函数由本机代码组成 - 这意味着它不是普通的 Javascript 函数。由本机代码组成的函数始终是浏览器（或代码运行的任何环境）提供的函数；它们通常不能被您自己编写的任何 Javascript 函数模拟。例如，只有window.history 对象可以执行像history.back() 这样的历史操作；如果window.history 被覆盖，并且您没有保存对它或任何其他history 对象的引用，则无法编写自己的函数来执行history.back()，因为.back() 调用特权本机代码 需要可见 Javascript 和浏览器引擎之间的接口。

同样，内置的window.screen getter 在被调用时返回一个值普通Javascript 无法直接观察到。在没有轮询的情况下，观察更改的唯一其他方法是侦听 resize 事件，如另一个答案中所述。 （这个resize 事件，类似于window.screen 返回的基础值，由浏览器内部管理，否则无法观察到。）

如果resize 事件没有被触发以响应分辨率的变化 - 例如，如果浏览器窗口已经足够小以至于不需要更改较小的分辨率 - 那么分辨率变化不会导致无论如何都被解雇了，这意味着除了轮询之外，不幸的是没有办法监听它。 （You can try it for yourself，看起来分辨率更改不会触发任何其他事件）

您可能会编写（或调整）一个浏览器引擎，该引擎会侦听操作系统的分辨率变化并在找到时调度 Javascript 事件，但这样做需要的知识远远超出 Javascript - 请随时浏览 Chromium's source code 了解详细信息，但它相当复杂，而且对于没有所用语言经验的人来说可能是不透明的。

Answer 2

According to Mozilla，屏幕调整大小事件仅在 window 对象上触发。因此，您应该将侦听器添加到 window 而不是 screen ：

window.addEventListener('resize', yourfunc)

在 Windows 10 下测试，它与 Chrome 一起使用就像一个魅力。值得一提的是，浏览器计算的实际屏幕大小使用屏幕分辨率和缩放。

例如，如果您使用的是 1920x1080，则缩放 100%：

• 传递到 3840x2160，缩放 200% 将输出 1920x1080 的浏览器窗口，resize 似乎没有触发
• 传递到缩放 150% 将输出 1280x720 的浏览器窗口并触发 resize

尽管如此，还是有一个陷阱。只有当它实际触发浏览器窗口调整大小时，才会检测到屏幕分辨率更新。考虑到浏览器窗口的窗口/全屏初始状态以及更小/更大屏幕尺寸的演变，这一点并不那么明显。