introducing javascript es6 proxies One of the new features introduced in the ES6 standard is the object. The object is used to define custom behavior for fundamental operations (e.g. property lookup, assignment, enumeration, function invocation, etc). Proxy Proxy You may run into some terms/concepts here shortly that are foreign to you, I encourage you to push through as the concept is actually fairly simple and useful. Proxy There are 3 key terms we need to define before we proceed: — the placeholder object which contains the trap(s) handler — the method(s) that provide property access traps — object which the proxy virtualizes target Check for a list of all available here traps. So let’s look at some examples and real world applications. Syntax Below is an example of proxy syntax where we pass in a (in this case an empty object) and a . target handler proxy syntax Common Object Property Lookup Behavior common object property lookup behavior In the snippet above we have a simple object with 2 keys( and ). Note the console logs on lines 7 and 8 return the key values. Then note the normal behavior on line 9. We attempt to retrieve a key( ) which does not exist, so we receive reason code beer undefined. Proxied Object Property Lookup Behavior proxied object lookup behavior There is a bit more going on in this snippet. We define our handler(line 3) which is using the trap. The handler passes the target and the requested key name into the trap. Line 11 contains the same object from our Common Object Lookup example. Our is instantiated on line 16. GET proxy Noting the console logs on lines 18 and 19 return the expected key values. But take a look at the rule from the log on line 20 — ‘key does not exist’. We have overridden the default behavior for the operation with our custom proxy. Using Proxies to enforce value validations proxies to enforce value validation In this snippet we define our on line 4. We then check to make sure that the prop is the one being set and if so we validate on type and acceptable value range. There are custom error messages passed if validation fails. Otherwise, on line 16 we set the new prop value and return true to indicate a successful prop value set. Nothing to it. handler age There are many real-world applications for Proxies validation value correction property lookup extensions tracing property accesses revocable references implementing the DOM in javascript So that’s it for Proxies in ES6. Let us know your thoughts and questions on . Keep after it. twitter If you like this article, please recommend and share to help others find it!
