Javascript construct trap not working in class returning proxy

Question

I am trying to create a little javascript two way form binder using proxies. I am stuck on how I can intercept 'new' calls. I use a 'construct' trap but it doesn't fire. Here is my code, I have removed the stuff that is not relivant for my specific problem

    class BoundObject {

        constructor(object, element) {

            // distribute object properties into "this"
            for (const prop in object) {
                this[prop] = object[prop]
            }

            return new Proxy(this, {

                construct:(target, args) => {
                    console.log(`Creating a new ${target.name}`) // why is this not fired?
                    return Reflect.construct(...args)
                },
                set: (target, prop, val, receiver) => {
                    console.log(`attempting to set ${prop}=${val} type ${typeof val}`);

                    return Reflect.set(target, prop, val) 
                }
            })
        }
    }

    // create an instance of our BoundObject class, passing in an object and an HTML element
    const user = new BoundObject({name:'fred'},document.querySelector('#user-form'))    // why is the 'construct' call not intercepted?
    user.name = 'mary' // set user name. The 'set' call is sucessfully intercepted

The set trap works, but the construct trap fails to fire. I suspect this is to do with javascript deep magic around 'this' but cannot figure it out

How can I intercept the construction of the proxy object my class returns?

You're returning the Proxy instance from your "BoundObject" constructor. When do you expect the "construct" trap to be fired? You're code is already in the actual class constructor; the code is not going to jump into the returned Proxy code. — Pointy
– Pointy, Commented Jun 3, 2023 at 21:43
Nothing is invoking new user (which is impossible since it's not a constructor anyway), so the construct trap doesn't fire on it either. — Bergi
– Bergi, Commented Jun 4, 2023 at 2:21
"How can I intercept the construction of the proxy object?" - why would you need to "intercept" that? Just put the code that you want to run on construction in the constructor of your class. — Bergi
– Bergi, Commented Jun 4, 2023 at 2:23
@kiwichris ... In addition, a class-constructor never ever should return anything else than an instance of its own type. Anything different than that should be returned by a factory function. — Peter Seliger
– Peter Seliger, Commented Jun 6, 2023 at 11:53

Unmitigated · Accepted Answer · 2023-06-03 21:36:21Z

1

The construct trap is only called when the [[Construct]] internal method is invoked on the proxy itself. This could be caused by using the new operator. However, in this case, the Proxy is returned as a result of calling new on the BoundObject constructor; new was not called on the proxy itself.

Here is an example of where the construct trap could be called.

function MyObj() {}
const proxy = new Proxy(MyObj, {
  construct(target, args) {
    console.log(args);
    return new target(...args);
  }
});
new proxy('something');

answered Jun 3, 2023 at 21:36

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

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

1 Comment

kiwichris Over a year ago

thank you. I was getting confused between the 'BoundObject' constructor, and the proxy object returned by the BoundObject constructor

Collectives™ on Stack Overflow

Javascript construct trap not working in class returning proxy

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related