Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Customize Assignment Behavior with a Proxy Handler

    John LindquistJohn Lindquist
    javascriptJavaScript

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    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.