ES6 Proxies

Proxies are a special kind of object that allows you to override the default behavior of an operation on an object by “sitting” in front of that object. A proxy expects two params: a target – object you want to proxy, and a handler – operations you wish to rewrite aka “traps” which are called when various operations are performed against the proxy. These handlers have the opportunity to perform extra logic in addition to forwarding the operations on to the original target object. There are a whole bunch of methods we can override and below we are overriding the get() and set() methods on the object.

See the Pen thecodelog.com - ES6 Proxies 1 by Deano (@deangilewicz) on CodePen.

The proxy becomes the primary object the code interfaces with, and the actual target object remains hidden/protected. You might do this because you want to pass the object somewhere that can’t be fully “trusted” and so you need to enforce special rules around its access rather than passing the object itself. A regular proxy always traps for the target object, and cannot be modified after creation.

See the Pen thecodelog.com - ES6 Proxies 2 by Deano (@deangilewicz) on CodePen.

Each available proxy trap has a corresponding Reflect static function of the same name. Reflect is an object but does not have a constructor. You will more than likely use both Proxy and Reflect in tandem. It is possible to revoke a Proxy by calling Proxy.revocable(). This expects 2 params: a Proxy object, and a revoke function that accepts no arguments. If the revoke() function gets called, the proxy becomes unusable: Any trap to a handler will throw a TypeError. Once a proxy is revoked, it will remain revoked and can be garbage collected. Calling revoke() again has no effect.

See the Pen thecodelog.com - ES6 Proxies 3 by Deano (@deangilewicz) on CodePen.