Why proxy and Object.create don't work together

Question

when i do this like below, i always get "RangeError: Maximum call stack size exceeded", but i just aceess to receiver, it will be ok if i delete console.log(receiver); , very confused.

const someObject = {};
const proxy6 = new Proxy(someObject, {
  get(target, prop, receiver) {
    console.log(receiver);
    return 111;
  },
});

const derived = Object.create(proxy6);
console.log(derived.someProperty);

i try use Object.assign() to wrap proxy, it's ok.

Answer 1

The behaviour is implementation-dependent. For instance, Firefox (I'm running version 108) has no issue with this code, and just prints an object representation in the console:

In Chrome/Edge, the console implementation wants to retrieve some object properties of the object it gets to print, including [Symbol.toStringTag] . But since receiver is derived this initiates the proxy's get handler again, leading to infinite recursion.

To avoid this, make your handler code conditional: determine exactly when you want to execute that console.log and return 111.

So do something like this:

 const someObject = {}; const proxy6 = new Proxy(someObject, { get(target, prop, receiver) { if (["someProperty"].includes(prop)) { // Add more props as desired... console.log(receiver); return 111; } return Reflect.get(target, name); // default }, }); var derived = Object.create(proxy6); console.log(derived.someProperty);