Two ES6 guys you may not know
However, recently I found myself reading a page that contains all the es6 features called es6-features.org and I found two guys that I've never seen before, and that's what I am going to explain right away. Even in 2017, I think it's worth to spread the existence of these features :)
The proxy object is defined by the MDN Web Docs as follows
The Proxy object is used to define custom behavior for fundamental operations (e.g. property lookup, assignment, enumeration, function invocation, etc).
The proxy object may have a lot of applications, but I will focus in one that I find really interesting:
- Multiple Inheritance
Multiple Inheritance, in object oriented languages, is the ability to extend features, methods, etc. from more than one parent. Since languages like Java, this is not possible natively.
Basically, the proxy object has a concept called trap, that is analogous to the operating systems traps. In the Proxy world, traps are methods that are called when some operation is called. So for example, if I use the proxy object within an iterator, it may use the get, set, and has traps.
To illustrate the behavior of the Proxy object, look at the following snippet
The function multiInherit will create an object with properties that come from different parents. We can use it as follows
Some interesting facts:
- The type of the variable obj will be Object
- The value of the variable obj.a is 1
- The value of the variable obj.b is 2
- The value of the variable obj.c is undefined
The last three calls will trigger the get trap because we wanted to get the value of some object property. If we try to use the basic operation in, the has trap will be triggered.
The Reflect object is defined by the MDN Web Docs as follows
Reflectis not a function object, so it's not constructible.
For those who came from languages like Java or C#, you should know that reflection is the way of finding methods and attributes of classes dynamically. This can be very useful when we have to call methods dynamically, or get and set the value of some attributes that are defined at runtime.
While learning and using React, I found myself building classes that inside constructors had a lot of method bindings in order to be able to use the this keyword with the same context.
Well, you may disagree that the repetition of bindings inside the constructor is verbose, but I think it is. Using the power of reflection I refactored the component to be as follows
With the method bindMethodsWithContext I won't worry anymore with binding every new created method of my class with the this context.
Furthermore, you can put this method in a BaseClass that is extended from every component of your app, and keep out future binding bugs.
These were a small set of applications of the objects Reflect and Proxy, and I will be happy if this article helped you somehow. If you are using one of these objects differently, please share with us too!
Thanks for reading and leave a feedback :)