代理窗口對象以檢測更改

Question

我可以代理window對象來檢測更改嗎？ 我沒有運氣就嘗試了以下方法：

 var handler = { get: function(target, property) { console.log("getting " + property + " for " + target); return target[property]; }, set: function(target, property, value, receiver) { console.log("setting " + property + " for " + target + " with value " + value); target[property] = value; return true; }, }; var p = new Proxy(window, handler); setTimeout(() => { window.a = 10; // expecting a log, but nothing... }, 3000); setTimeout(() => { window.c = 20; // expecting a log, but nothing... }, 4000); 

Answer 1

您必須在下面的代碼中而不是在window引用Proxy實例：

 var handler = { get: function(target, property) { console.log("getting " + property + " for " + target); return target[property]; }, set: function(target, property, value, receiver) { console.log("setting " + property + " for " + target + " with value " + value); target[property] = value; return true; }, }; var p = new Proxy(window, handler); setTimeout(() => { pa = 10; // <------------ }, 300); setTimeout(() => { pc = 20; // <------------ }, 400); 

如果您無法更改引用該window的代碼，則也可以命名代理window （並將對真實窗口的引用保存在另一個變量中），但是該代碼看起來會令人困惑。

如果它在獨立的腳本文件中，則上述技巧將無效，並且您將無法使用Proxy -畢竟，您無法重新定義window對象。 如果要在window上尋找特定屬性的更改，則可以使用defineProperty並讓設置方法在將屬性描述符分配給以下屬性時使用新值覆蓋它：

 Object.defineProperty(window, 'a', { configurable: true, set(value) { console.log("setting with value " + value); Object.defineProperty(window, 'a', { value }); } }); setTimeout(() => { window.a = 10; console.log(window.a); }, 300);