Intive Blog

Proxies in JS

The new implementation of ES6 gives us many new features. One of these is the possibility to create a “proxy” for objects. Let us see this in detail.

Internal Methods

By the term “proxy” we usually refer to software or a physical device working as an intermediary that manages connections, servers and queries. The basic concept of proxies in ES6 is still the same: an intermediary that in this case works within the common internal methods for any object.

Internal methods are normal and habitual for us, only that until now we did not know them with that name. Objects have internal methods common to all objects- For instance, all have a method called “get”.

When we perform an

we are actually calling the internal method “get”.

Proxies

One way to add functionality to an object would be to add a method to it. Another way would be through prototyped inheritance to add methods to that object.

But there are some snags if we implement any of these two approaches. In the first case:

– The object will always have a method
– That method will be specific to that object

And in the second case we would be modifying all the objects that take their inheritance from the main object.

Consequently if by using the first approach we wanted to modify a property of an object and check the data prior to the modification, we should use a specific method for such functions.

For example:

JS Bin on jsbin.com

JS “proxies” work to intercept internal methods such as “get” or “set”. They work like a trap where everything invoking those methods falls. Once in that trap, we can validate data, deny access or just pass the call to the method of the object.

What we are doing is saying that our object is now “wrapped” in the “proxy”, and that each method invoked by the object, should be first invoked in the “proxy”. We do this in this way:

To declare a “proxy”:

In this way the “objectProxy” is a replica of “Target_object”, but whenever any of these internal methods are invoked, these will pass first through the ones defined in object_with_new_functions”. If no method is defined, the ones of the “Target_object” will be invoked directly.

An example

Situation: There are many console.log commented in the code. One possibility is to try by “disconnecting” them and check how the object changes step by step.

Proposal: Firstly we should pass a “user” object through a function that will modify some of its properties. We will then pass that wrapped object through a “proxy”, and we will try to modify the same properties, but the “proxy” will not allow us.

Development:

1) We define the object on which we will apply the “proxy”.

2) We define our “handler” object. This object will have the definitions of the methods we want to intercept.

3) We intercept the method “set”.

4) We call the “Reflect”, for it to perform the action we desire on the object “user”.

5) We define a function that will modify our object “user”.

6) We call it passing the object “user” to it.

7) We have changed the values of the object “user”. Both “user.name” and “user.debt” have our values. Now we define a new “user” object equal to the previous one.


8) We then send it to the function “changeDataUser”, wrapped in our “proxy” that will modify the native method “set”.


9) Finally, we resend it without the wrapper of the “proxy”.


Alternative

When creating our “proxy” we can also create it with:

Thus, we can cancel the “proxy” if necessary:

JS Bin on jsbin.com

Conclusion

“Proxies” allows us to extend somehow the operator *.* of each JS object without modifying the object itself, nor the natives methods. They allow us, for instance, to add methods under special circumstances (for example to intercept operations on properties or increase levels of security) without modifying the object. In my view, they somehow work as a kind of “anti-prototype”.

Resources:
Proxy in MDN

Proxies in detail

Objet Reflect

Pablo Hiyano

Pablo Hiyano is coordinator of technical teams at intive-FDV. A student of Biology at Universidad de Buenos Aires (UBA), since kid his great interest in programming made him a self-taught developer passionate for the Javascript world. In his free time, he enjoys playing with his child, watching british series and reading about philosophy, especially works by Michel Foucault.

Add comment