Customize Assignment Behavior with a Proxy Handler

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

Proxies allow you to hijack the default process of assigning a value to a property on an object. Create a Proxy and link the object you want to proxy to the handler then you can define the behavior inside of a set function on the handler. The simplest example is to create a logging behavior which would log out the previous and next values before the value has changed.

Instructor: [0:00] With a person object and a property of name assigned to John, if we try and set the person.name to a different value -- we'll try Mindy -- we can hijack what happens between here and here with a proxy.

[0:18] This means that if I create a new proxy, pass in person, and create a handler object, we'll define the handler as an object with a set function. Then we re-assign person to this proxy. Now you can see that setting name to Mindy doesn't work because the proxy trap returned falsish.

[0:48] If I simply return true, the result now for assigning the name to Mindy -- if I console.log this out, person.name -- is John, meaning that the name didn't change at all. I hijacked the process. I didn't allow anything to happen.

[1:10] The arguments for set are the target object, the key, and the value. In this instance, the target is person. The key is name. The value is Mindy.

[1:30] We could log that out, saying, "console.log target key value." You can see we have target key value.

[1:44] Instead of returning true, I can return reflect.set target key value. Now this will work appropriately, where person name is now Mindy. We can do whatever we want before that actually happens, like logging out values.

[2:04] We could show a console.log where we show that the key of name is changing from the current value or the previous value, however you want to look at it, target key, to the new value.

[2:20] You can see that the name is changing from John to Mindy. If I make another change -- I'm changing this to Ben -- I'll see the key is changing from John and Mindy. Then it's changing from Mindy to Ben.

[2:37] Inside of our proxy, with a handler with a set function, we're logging out the values before we make the actual change. Reflect.set is letting us know if that changed succeeded and returning that true or false.

[2:51] I could also make that fail. If I object.freezePerson, meaning disallow any changes on the person object, you can see that it throws that error, set on trap returned falsish.

[3:06] Before that error happened, you could check back in your log to see that it tried to change John to Mindy before that failure happened. It never even made it to trying to change the name to Ben.

[3:19] If you unfreeze, then we're back in business. Everything succeeds. Our logs show John to Mindy and Mindy to Ben because reflect.set is passing and returning true inside the set.

[3:33] Again, this name and value go into this handler. They go through set. The target name and value go here. Then reflect.set will tell us if that works or doesn't work.

egghead
egghead
~ 11 seconds ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today