You may have heard about or come across a new term called Proxies. So, what do you mean by Proxy, what is JavaScript Proxies, how are they more helpful and how you can implement them using ES6?

Too many questions. Phewww… Let’s find out more about them.

What is a Proxy?

Dictionary Meaning:

the authority to represent someone else,

a figure representing the value of something

Proxy means a substitution agent authorized to act on behalf of an actual entity, document, body or person who permits it.

What is a Proxy in JavaScript?

Proxy object was a new feature that was introduced in ES6. They allow you to intercept and customize operations performed on objects. E.g., function invocation, assignment, property lookup, enumeration, etc. We use proxies for blocking direct access to the target function or object.

There are three principal terms that you need to know before we move ahead.

Handler – Placeholder object which contains traps. More info here

– Placeholder object which contains traps. More info here Traps – The methods that provide property access.

– The methods that provide property access. Target – Object/Function which the proxy virtualizes.

Syntax

Below we have mentioned the syntax of a simple proxy where we pass a target and a handler.



Various Handlers, Traps, and Examples

Let us start with the compatibility check to see if the browser supports Proxy.

Common Object behavior

Here we will define an object and then try to access a property of the same object that does not exist.

Using Proxy for the same Object

In the following example, we will use a handler with a GET trap. The handler will pass the target and the requested key to the trap.

﻿

Get

The get trap executes when you try to access a property of an object using the proxy. Get method accepts target (the object we are trying to access) and the property (the property that we try to access).

Syntax

target: The target object.

property: The property name to get.

receiver: Either the proxy or an object that inherits from the proxy.

Example

In the following example, we will try to manipulate the value before we display it in the console using get trap.

Set

The set trap is executed when you try to set a property of an object using the proxy. The set method accepts target (the object we are trying to access), property (the property that we try to access) and value (the value of the property we are trying to set).

Syntax

target: The target object.

property: The property name to set.

value: The new value of the property to set.

receiver: The object to which the assignment was originally directed. This is usually the proxy itself. But a set handler can also be called indirectly, via the prototype chain or various other ways.

Example

In the following example, we will add some properties with value to the object before defining the proxyObj. You will notice that after we define the proxyObj and try to set a new property, it will execute the trap and store the modified value.

Has

The has trap is executed when an in operator is executed. The has method accepts target (the object we are trying to access) and property (the property we are trying to access).

Syntax

target: The target object.

property: The property name to check for existence.

Example

In the following example, we will check if the key includes the substring “ar”. First of all, we will check if the key exists and if it is true, we will check if it contains the substring. If both the conditions are matched we will return the boolean value true or else we will return the boolean value false.

Apply

The apply trap allows you to call proxy with parameters. It overrides the default function. The apply method accepts target (the object/function we want to access), thisArg (the this argument for the call) and argumentsList (the list of all the arguments in the form of an array).

Syntax

target: The target object.

thisArg: The this argument for the call.

argumentsList: The list of arguments for the call.

Example

In the following example, we will override the function to multiply two numbers with a proxy that will add “1” to the multiplication.

Construct

The construct trap is executed when new operator is called. In order for this trap to be valid, the target on which the construct trap will be called should itself have a construct method (i.e. new Target() should be valid).

Syntax

target: The target object.

argumentsList: The list of arguments for the constructor.

newTarget: The constructor originally called.

Example

In the following example, we will pass the amount value through a proxy and add a currency symbol to it.

deleteProperty

The deleteProperty trap is executed when delete method is triggered. It accepts target (the object/function we want to access) and property (the property we are trying to access).

Syntax

target: The target object

property: The property name to delete.

Example

The following example demonstrates how we can trigger a function and perform manipulations when the property of an object is deleted.

Example Applications of Proxies