Customize Behavior when Accessing Properties with Proxy Handlers

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

A Proxy allows you to trap what happens when you try to get a property value off of an object and do some behavior before the value is accessed. For example, you could check the name of the property and always return a certain value or even check if the property is undefined and return some default. The options are unlimited.

Instructor: [0:00] When we log out person.name, the log will show John. We can hijack that process by assigning person to a new proxy. Pass in person and a handler, and we can define our handler to implement a get function.

[0:22] Now if I always return something, then when I log out person.name, I'll get back something. Whatever I return from here will be assigned to the property I'm trying to access, regardless if that property exists or not.

[0:41] Age is not defined, but because I'm trying to get a property off of person, age returns as whatever instead of undefined. If I remove the proxy, you can see John and undefined. If I put the proxy back, you can see whatever and whatever.

[0:56] The arguments for the get function are the target and the key, the target being the person object and the key being whichever property return access. If we log those out, console log target and key, we'll see John name and John age.

[1:16] If we just want the default behavior, we can just reflect get target key, and we'll get John and undefined as expected.

[1:26] This does give us the opportunity to modify the returned result. I could say plus, exclamation point, where we always have an exclamation point, add it to the end of whatever's returned, or you can check if the key is a specific thing.

[1:41] If the key is name, I always want to return Mindy. You can see it returns Mindy rather than checking what's on the actual target.

[1:51] You can also handle this undefined scenario. You could say if reflect has target key, then return the actual result. Otherwise, return "You tried to access something undefined." Hit save and you can see Mindy comes through just fine. Person age comes through as "You tried to access something undefined."

[2:21] You have lots of options on how to handle accessing properties off the objects.

egghead
egghead
~ 2 minutes 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