When Should You Use a Proxy?
Problem
What is a proxy and when should you use one?
Solution
A proxy object allows you to customize the behavior of an object. Some of the ways you can use a proxy is for interception of an object, object virtualization, profiling, and contracts for object use.
The Code
var handler = {
set (target, key, value){
console.info(`property "${key} set on object "${target}" with a value of "${value}"`);
}
}
var target = {};
var proxy = new Proxy(target, handler);
proxy.a = 'a' //outputs property "a set on object "[object Object]" with a value of "a"
proxy.b = 'b' //outputs property "b set on object "[object Object]" with a value of "b"
proxy.c = 'c' //outputs property "c set on object "[object Object]" with a value of "c"
Listing 16-1.
Creating and Using a Proxy
How It Works
In a similar way, a proxy server is used as the intermediary between clients and other servers. A proxy object allows you to have code that is between the client and the target object. Proxies determine behavior whenever the properties of the target object are being accessed.
This is an example of interception, and we have a generic objects called
target and handler
. While target does not do anything, handler will execute the set method anytime a property has be set on the target object.
What Are Traps ?
Problem
When working with a proxy object, what is a trap and how do you use one?
Solution
Traps are methods that provide access to the object being proxied. This allows you to know things like when a property is being set or whether the object is extensible.
The Code
function trapMessage() {
return "It's a Trap!!!"
}
var handler = {
apply: function(target, thisArg) {
return target.apply(thisArg);
}
};
var proxy = new Proxy(trapMessage, handler);
console.log(proxy()); //returns It's a Trap!!
Listing 16-2.
Setting Traps with the Handler Object
How It Works
Listing 16-1 showed how traps can work. The proxy is aware of when a property of the object is being set. Every time a property is set on the object, the set method in the proxy is called. This allows you to make judgments on what should happen.
Methods like these are called traps. They allows you to define custom behavior when operating on an object.
In this case, a function is the target for the proxy. When the function is being called through the proxy, it uses the apply method to make the function call. The apply function is the trap. The proxy calls the function instead of it being called directly. This gives your code a level of protection where you can do things like evaluate the results.
There is a long list of trap methods
that you can use to evaluate what is going on with your object
. Traps can be used in situations like when the new operator has been called. The full list can be found on the Mozilla Developer Network at
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
.
What Is the Difference Between Object.observe and a Proxy ?
Problem
You need to know when you would use a proxy object rather than Object.observe.
Solution
Object.observe is now considered obsolete. Browsers will not support this feature in the future.
How It Works
The proxy object has more features than the now obsolete Object.observe method. If you are required to see any changes to an object, using a proxy object will allow your projects to work into the future without worrying about when or if a browser will no longer support Object.observe.
By setting a series of traps, you can see how an object changes over time. One advantage is that the trap is set as the object is being changed where the Object.observe method would notify you after the change has been made.
What Is a Revocable Proxy ?
Problem
You need to find a key in the Map object.
Solution
Use the has key to check the existence of a key in the Map object.
The Code
var handler ={
set (target, key, value){
console.log('PROPERTY SET')
}
}
var target = {};
var revocable = Proxy.revocable(target, handler);
var proxy = revocable.proxy;
proxy.prop1 = 'Prop1'; //returns PROPERTY SET
revocable.revoke();
proxy.prop2 = 'Prop 2'; //returns TypeError
Listing 16-3.
Creating and Using a Revocable Proxy
How It Works
In all the examples in this chapter, the proxy object has been used to grant access to an object. It used traps to determine what is happening with the object. A revocable proxy
takes away access to the object. This works in a similar way to a normal proxy; however, the new operator is not used. In this case, to access the revoke method, you must use the proxy object in a static fashion just like the Math object.
After the results of the Proxy.revocable method are stored in a variable, you can set the conditions for when the
revoke() method
can be called. When it is called, all access to the object by way of the proxy will result in a TypeError.