Detecting changes in a global object using Proxy

Question

    const scopeHandler = {
        set: function(obj, prop, value) {
            console.log(`${prop} changed from ${obj[prop]} to ${value}`);
            obj[prop] = value;
            return true;
        }
    };
    const scopeProxy = new Proxy(window.app, scopeHandler);

So I'm trying to detect any changes whenever app or any of its children app.reports changes, but it doesn't log anything. What am I doing wrong?

CertainPerformance · Accepted Answer · 2021-11-20 04:47:15Z

2

A Proxy will only appear to do anything if the Proxy itself is the value that's "changed" later (via property assignment or whatever traps you have).

If you have an existing object, create a Proxy wrapper for it, and then other parts of an app use the existing object, you won't see anything happen with the Proxy; the other parts of the object would have to have the Proxy instead of the original object.

Here, you might be able to reassign window.app to the Proxy, so that other references to window.app now reference the Proxy instead.

window.app = new Proxy(window.app, scopeHandler);

answered Nov 20, 2021 at 4:47

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Detecting changes in a global object using Proxy

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related