What are Proxy Objects in Javascript?
What is Proxy Object in Javascript
Proxy Object in Javascript acts as an intermediate object through which we can access and modify the attributes of an original target object. Using proxies we can override and attributes and methods of the target object.
Creating a Proxy Object
A proxy object can be created using Proxy
object and it takes two arguments. The first is the target which and be an object or function that returns an object. And the second is the object which contains handlers these handlers contain traps that are triggered by a proxy object when a certain event occurs. Some of the trap methods are get
, set
, apply
etc are discussed below in the Proxy Traps Section
Below is an example of creating a proxy object and retrieving attributes.
let car = { manufacturer:"Tata", model:"Safari", price:120000, } const handler = { get(target, property){ return target[property]; } }; let carProxy = new Proxy( car, handler )
The object carProxy
has access to all the attributes of car
an object and when an attribute is called it implicitly calls the get trap function with the argument target and property.
The target
is the car
object and property
the argument is the attribute called.
Example
console.log(carProxy.manufacturer); console.log(carProxy.model);
In carProxy.manufacturer
the manufacturer
is the property that we want to display.
Example of Using Proxy Object
A more well-formed example of using a proxy object with get
and set
traps.
let student = { name:"Vivek", passout_percentage:80 } const handler = { get(target, property){ return target[property]; }, set( target, property, value ){ target[property] = value } }; let studentProxy = new Proxy( student, handler ); console.log("Name before updating is:"+studentProxy.name); studentProxy.name = "Veeren"; console.log("Name before updating is:"+studentProxy.name); console.log(student);
Here studentProxy.name = "Veeren";
call the set
trap that will set the value Veeren to name
property of student object.
We can perform a few additional logic inside set
trap method.
Output
Name before updating is:Vivek Name before updating is:Veeren [object Object] { name: "Veeren", passout_percentage: 80 }
Note
The assignment will call the set
trap method if you updated the target. The actual object will also be modified.
How to Call a Function using Proxy Object
You can also call a proxy object as a function that will return some object. For this, you have to pass the target wrapped inside a function.
Look at the below example
const studentFunction = () => { return { name:"Vivek", passout_percentage:80 } }; let isPassed = new Proxy( studentFunction, { apply( target, thisArg, argumentsList ){ return target().passout_percentage >= 35; } } ); console.log("Is Student passed the exam: "+isPassed());
Here studentFunction
is a function that returns an object. To call a function the handler must have a apply
trap defined.
The apply
trap is called when isPassed()
is called like a function.
Output
Is Student passed the exam: true
What are Proxy Traps
The traps in Proxy objects are the function that gets called implicitly by the proxy objects themselves. The functions that get called truly depended on what kind of operations are been performed over the proxy object.
Example:
When you call studentProxy.name
it triggers get(target, property)
handler method, similarly when you studentProxy.name="Veeren";
then set(target, property, value)
handler method will be called.
The get() Trap
The get()
trap method is triggered and through the get()
trap we can return the results as it is or can modify the output.
let student = { name:"Vivek", passout_percentage:80 } let studentProxy = new Proxy( student, { get(target, property){ return target[property]; } } ); console.log(studentProxy.name); // accessing values
The set() Trap
The set()
trap is triggered during the assignment of new values to the proxy object. It takes three parameters target
, property
and value
.
let student = { name:"Vivek", passout_percentage:80 } let studentProxy = new Proxy( student, { get(target, property){ return target[property]; } } ); console.log(studentProxy.name); // accessing values
The apply() Trap
The apply()
trap is triggered when a proxy object is called a function. You can also pass parameters through the function which returns an object.
Note
Calling a proxy object like function object works if the first argument of the proxy is a function. For non-function objects the apply()
trap is not triggered.
const studentFunction = () => { return { name:"Vivek", passout_percentage:80 } }; let isPassed = new Proxy( studentFunction, { apply( target, thisArg, argumentsList ){ return target().passout_percentage >= 35; } } ); console.log("Is Student passed the exam: "+isPassed());
The construct() Trap
The construct
trap function does the same process as a class constructor. It is triggered when a new object is created from a proxy object.
The construct
takes target
and argumentsList
as parameters.
function studentFunction(){ return { name:"Vivek", passout_percentage:80 } } let Student = new Proxy( studentFunction, { construct( target, argumentsList ){ console.log('paramters ',target, argumentsList); return target(); } } ); let new_student = new Student({age:18});
Output
paramters function studentFunction(){ return { name:"Vivek", passout_percentage:80 } } [[object Object] { age: 18 }]