窗口上的代理

我想设立一个Proxy当定义了新属性时它会警告我window目的。 （实际上我想捕获所有全局变量声明）

let handler = {
    defineProperty(target, key, descriptor) {
        console.log('hey', key);
        return false;
    }
};
window = new Proxy(window, handler);
window.foo = 'bar';
// nothing happens

上面的代码适用于除窗口之外的任何对象：

let handler = {
    defineProperty(target, key, descriptor) {
        console.log('hey', key);
        return false;
    }
};
let target = {};
target = new Proxy(target, handler);
target.foo = 'bar';
// console: "hey  bar"

有什么办法可以设置一个Proxy on the window对象，如果不可能，是否有任何棘手的解决方案来实现相同的目标？

简短的回答是否定的。您不能为此使用代理。 最好修改和重构您的应用程序，以避免进行此类恶作剧。但我知道有时我们没有时间把事情做好。尽管我不建议您这样做，但您仍然可以对窗口对象进行更改。

您有多种选择来执行此操作。 如果你知道你正在寻找的变量列表，你可以使用类似的东西Watch.JS https://github.com/melanke/Watch.JS基本上它能够跟踪所有更改，但我无法使其可靠地工作，因此最好指定一个列表

watch(window, ['list', 'of', 'vars'], (prop, action, newVal, oldVal) => {
    console.log('Property changed', prop, action, newVal, oldVal);
}, 1);

作为替代方案，您可以创建一个简单的脏检查器

let props = Object.keys(window);
const check = () => {
    const currentProps = Object.keys(window);
    const newProps = currentProps.filter(item => props.indexOf(item) === -1);
    if (newProps.length) {
        console.log('Added these properties', newProps);
        props = currentProps;
    }
    requestAnimationFrame(check);
};
requestAnimationFrame(check);

But in case you decided to go with either solution, you have to make sure all checks will stop when needed to avoid memory leaks, or CPU consumption. This check code is not consuming too much but it could in theory. So you have to keep an eye on it. On empty page profile data looks like this

并且记得使用unwatch如果是 Watch.JS，或者添加一个条件来停止检查，以防万一您使用第二个解决方案，一旦他们完成工作