Proxy on window

Question

I would like to set up a Proxy which warns me when a new property is defined on the window object. (Actually I'd like to catch all the global variable declarations)

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

The code above works for any object but window:

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"

Is there any way to set up a Proxy on the window object, and if it's not possible, is there any tricky solution to achieve the same goal?

Answer 1

Short answer is no. You can't use a proxy for this. It is always better to revise and refactor your app to get rid of need to do such shenanigans. But I know that sometimes we have no time to do things right. Althrough I don't recommend you to do this, you still can get a changes on window object.

You have a couple of options to do this. If you know a list of vars you're looking for, you can use something like Watch.JS Basically it is able to track all the changes, but I wasn't able to make it work reliably so it is better to specify a list

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

As an alternative, you can create a simple dirty checker

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

And remember to use unwatch in case of Watch.JS or to add a condition to stop the checks in case you use the second solution once they will complete the job