检测javascript中的变量何时发生变化

Question

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

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

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

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

这似乎也有效（在某种意义上，如果我说在完成 screen.watch("width", () => console.log("hello")); 然后做 screen.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属性实际上是一个getter， on Screen.prototype。这不是一个普通的值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.watchpolyfill 将起作用，因为您将能够拦截对该.width属性的分配。这就是为什么在将您自己的 setter 分配给window.screen.width：

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

这表明你hello-你是在调用您以前分配给二传手screen的财产window。相比之下，由于本机内置属性不是由浏览器分配的普通值，因此hello当屏幕更改时您不会被记录。这种情况与此示例代码段中发生的情况有点相似：

window.screen.width = 1500

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

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

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

如果该resize事件没有响应分辨率的变化而被触发——例如，如果浏览器窗口已经足够小，那么较小的分辨率不需要更改——那么分辨率的变化不会导致任何事件被触发，这意味着不幸的是，除了投票之外，没有办法收听它。（您可以自己尝试，看起来分辨率更改时不会触发任何其他事件）

人们可能会编写（或调整）浏览器引擎，该引擎会侦听来自操作系统的分辨率更改并在发现时分派 Javascript 事件，但这样做需要的知识远远超出 Javascript - 可以随意浏览Chromium 的源代码以获取详细信息，但它是相当复杂，对于没有所用语言经验的人来说可能不透明。