JavaScript binding Proxy getters/setters to a specific context

Question

This might be a weird use case with no solution, but I would be happy to hear any answers on how to solve it.

Question:

I have a globally defined proxy:

this.appState = {}
global.globalState = new Proxy(this.appState, {
  get: (target, prop, receiver) => {
    console.log(this) // #3
    return Reflect.get(...arguments)
  },
  set: (obj, prop, value) => {
    console.log(this) // #2
    obj[prop] = value
    return true
  }
})

And somewhere else I have a class:

export default class MyClass {
  constructor() {
    console.log(this) // #1
    global.globalState["greet"] = "hi"
    console.log(this.globalState["greet"])
  }
}

Is it possible to bind this from the class constructor to be also this in getter and setter of the proxy? So basically, the context of the class constructor needs to be accessed from inside of the proxy getter and setter.

Are these two pieces of code in same file? Are they in same class, cus I see ` this` in the first piece, does it points to MyClass instance? — hackape
– hackape, Commented Mar 27, 2021 at 1:02
@hackape That is what the question is... if it's possible to bind the class to the Proxy this. The current ones are the proxy instance — charlietfl
– charlietfl, Commented Mar 27, 2021 at 1:04
Yes sure. Wrap the proxy creation into a function, then .call it with new MyClass — Jonas Wilms
– Jonas Wilms, Commented Mar 27, 2021 at 1:05
@JonasWilms this is not exactly what I want. The proxy is created globally on sort of boot. It also will be accessed from multiple classes so creating it in a specific class is not going to work. — Tim Nimets
– Tim Nimets, Commented Mar 27, 2021 at 1:12

jupp0r · Accepted Answer · 2022-12-08 22:57:51Z

1

If your question is wether the line

global.globalState["greet"] = "hi"

can be somehow modified to change the this in the Proxies get method, then the answer is no. The arrow function is lexically bound (so its this can't change between different calls), and even if you would use a regular function instead there is still no way to call it by assigning a property, as the function is called by the runtime, and as Proxies are transparent, there is no way to influence that at all (you don't even know that the line calls a setter).

To dynamically change this you could use something like:

 let context = null;

 // inside the getter
 (function thisInjection() {

 }).call(context);

however that would require modifying the Proxies code, and in that case replacing this with context would be way easier.

edited Dec 8, 2022 at 22:57

jupp0r

4,6902 gold badges31 silver badges34 bronze badges

answered Mar 27, 2021 at 1:13

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

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

1 Comment

Tim Nimets Over a year ago

Thanks for your answer, I see how it works. I just needed to hear that it is not possible because I spent some time hacking around it.

Collectives™ on Stack Overflow

JavaScript binding Proxy getters/setters to a specific context

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