How do I apply `get` Proxy on `window.location` in Javascript?

Question

I'm using Chrome 60. I've just tried to apply a get Proxy on window.location.

It worked for the first two reference, however, then it failed with Illegal invocation error:

location = new Proxy(location, {
    get: (target, name) => {
        console.log(name, target, "PROX");
        return target[name];
    }
});

The error messages were:

VM3495:3 Symbol(Symbol.toPrimitive) Location {…} "PROX"

VM3495:3 toString Location {…} PROX

Uncaught TypeError: Illegal invocation at :1:10

Why did it throw the error?
How do I apply get Proxy on window.location in Javascript?

@Bergi It can’t! The code was from my try to do so, though. — Константин Ван
– Константин Ван, Commented Apr 22, 2022 at 21:20

Bergi · Accepted Answer · 2017-08-30 17:38:50Z

Why did it throw the error?

It's for the same reason why proxies are incompatible with Sets or with Maps: They are native objects, and their methods (like toString in your example) expect to be called on exactly such a native object with the respective internal slots, not a proxy.

How do I apply get Proxy on window.location in Javascript?

You need to bind all methods that the get traps intercepts to the target:

new Proxy(location, {
    get: (target, name) => {
        console.log(name, target, "PROX");
        return typeof target[name] == "function"
          ? target[name].bind(target)
          : target[name];
    }
});

However, that still doesn't change that you cannot replace the window.location global with your own implementation. It's a non-configurable property, and assigning to it will cause a navigation not write to the property.

p0358 · Accepted Answer · 2025-09-26 10:47:58Z

0

A safer method seems to be:

new Proxy(location, {
    get: (target, prop, receiver) => {
        console.log(prop, target, "PROX");
        return Reflect.get(target, prop, target);
    }
});

Whereas regular Reflect.get(target, prop, receiver) (aka Reflect.get(...arguments)) would've been equivalent to just target[name], since the third argument to Reflect.get functions as the this for the get function. But we want our this to be of the original target, not of the new receiver.

answered Sep 26 at 10:47

p0358

1732 silver badges9 bronze badges

Collectives™ on Stack Overflow

How do I apply `get` Proxy on `window.location` in Javascript?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related