[ES6] Proxy

Posted 2020-10-15 Answer1215

What a Proxy does is handle communication for an Object.

To create a proxy object, we use the Proxy constructor - new Proxy();. The proxy constructor takes two items:

• the object that it will be the proxy for
• an object containing the list of methods it will handle for the proxied object

The second object is called the handler.

The simplest way to create a proxy is to provide an object and then an empty handler object.

var richard = {status: ‘looking for work‘};
var agent = new Proxy(richard, {})

The example above doesn‘t actually do anything, what make Proxy useful is the handler object, in the example above, they didn‘t give any methods to it.

The handler object is made up of a methods that will be used for property access.

Get Trap

const richard = {status: ‘looking for work‘};
const handler = {
    get(target, propName) {
        console.log(target); // the `richard` object, not `handler` and not `agent`
        console.log(propName); // the name of the property the proxy (`agent` in this case) is checking
    }
};
const agent = new Proxy(richard, handler);
agent.status; // logs out the richard object (not the agent object!) and the name of the property being accessed (`status`)

 

Accessing the Target object from inside the proxy

const richard = {status: ‘looking for work‘};
const handler = {
    get(target, propName) {
        console.log(target);
        console.log(propName);
        return target[propName];
    }
};
const agent = new Proxy(richard, handler);
agent.status; // (1)logs the richard object, (2)logs the property being accessed, (3)returns the text in richard.status

 

Having the proxy return info, directly

const richard = {status: ‘looking for work‘};
const handler = {
    get(target, propName) {
        return `He‘s following many leads, so you should offer a contract as soon as possible!`;
    }
};
const agent = new Proxy(richard, handler);
agent.status; // returns the text `He‘s following many leads, so you should offer a contract as soon as possible!`

With this code, the Proxy doesn‘t even check the target object, it just directly responds to the calling code.

 

Set Trap

The set trap is used for intercepting code that will change a property. The set trap receives: the object it proxies the property that is being set the new value for the proxy.

const richard = {status: ‘looking for work‘};
const handler = {
    set(target, propName, value) {
        if (propName === ‘payRate‘) { // if the pay is being set, take 15% as commission
            value = value * 0.85;
        }
        target[propName] = value;
    }
};
const agent = new Proxy(richard, handler);
agent.payRate = 1000; // set the actor‘s pay to $1,000
agent.payRate; // $850 the actor‘s actual pay

In the code above, notice that the set trap checks to see if the payRate property is being set. If it is, then the proxy (the agent) takes 15 percent off the top for her own commission! Then, when the actor‘s pay is set to one thousand dollars, since the payRate property was used, the code took 15% off the top and set the actual payRate property to 850;