javascript - 检测 javascript 中的变量何时更改

Question

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

分辨率更改会导致 screen.width 发生更改，但是(可能不足为奇，因为它们与不同的事物相关)不会触发“调整大小”事件，据我所知没有事件被触发。

我知道代理对象 ( 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，然后执行屏幕。 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 的回答后所揭示的那样，调整大小事件实际上可能会在分辨率更改时触发，但这似乎是对分辨率更改的响应，迫使窗口的边界变小，如果窗口很小，那么screen.width 可以在不触发调整大小事件的情况下改变。

Answer 1

What is going on when I assign a watcher/proxy that's messing things up.

问题是 width 属性实际上是 getter，在 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< 设置/p>

window.screen.width = 1500

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

Do screen.width = 100; and observe that hello is logged and screen.width is set to 100

它向您显示 hello - 您正在调用之前分配给 window 的 screen 属性的 setter。相反，由于 native 内置属性不是由浏览器分配的纯值，因此当屏幕更改时，您的 hello 不会被记录。这种情况有点类似于此示例片段中发生的情况:

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 函数由 native 代码 组成 - 这意味着它不是普通的 Javascript 函数。由 native 代码组成的功能始终是浏览器(或代码运行的任何环境)提供的功能；它们通常不能被您自己编写的任何 Javascript 函数模拟。例如，仅 window.history对象可以执行历史操作，如 history.back();如果 window.history 被覆盖，并且您没有保存对它或任何其他 history 对象的引用，则无法编写自己的函数来执行 history.back()，因为 .back() 调用需要可见 Javascript 和浏览器引擎之间的接口(interface)的特权 native 代码。

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

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

一个人可能会编写(或调整)一个浏览器引擎来监听来自操作系统的分辨率更改并在发现时调度一个 Javascript 事件，但这样做需要的知识远远超出 Javascript - 请随意浏览 Chromium's source code有关详细信息，但它非常复杂，并且对于没有所用语言经验的人来说可能是不透明的。