Updated April 15, 2023
let proxy = new Proxy(target, handler);
target and handler are the 2 parameters passed to the proxy().
- Targets: Object or a function which is to be proxied, the object can be a function, class or another proxy.
- Handler: An object which contains methods to control the behavior of proxy on performing some operation
Traps: Even though this parameter is not present in the proxy() syntax, we shall see its use later. These are the functions used to work on Targets.
We will be using Proxy Class from ES6 standard, hence arguments ‘target’ being the wrap object, ‘handler’ will be the function used on ‘target’ and to do some action on ‘target’, we use ‘trap’. If there is a ‘trap’ on the handler, the handler will run and proxy get a chance to handle it else these operations will be performed on ‘target’
- Proxy Object being a wrapper for target object where properties can be modified, the 3 main terms ‘target’, ‘handler’, and ‘traps’ will be helpful in this journey.
- Proxy traps the operations made to its target object and redirects all operations to handler objects.
- Then a proxy is created using new Proxy() with two parameters ‘target object’ and ‘handler object’
- A proxy is an exotic object, it does not have its own properties. If with empty ‘handler object, operations are forwarded to ‘target’
- We shall see a few examples to get a fair idea on how proxy() is implemented in real coding.
Explanation: In this example above, we define two properties employeeName1 and employer and a handler with no properties. As there are no properties defined on the handler, proxy will behave like an original target and hence the output.
Explanation: Here, all operations done on proxy are forwarded to target as there are no traps used here. Hence, proxy.number= sets value on target and proxy.number also returns a value from the target. On iterating proxy, target returns as ‘number’. With no traps here, the proxy is a transparent wrapper on target.get proxy.number.
Explanation: Here, the student object has stuName, stuAge, and stuSchool as properties. Proxy is created and passed to the proxy constructor. A handler object with get functionality is created to perform an action on the proxy objects.
Let’s start adding traps,
get() trap: It is fired when the property of the target object is accessed using the proxy object. In our previous examples, the properties of the object are directly accessed by targets.
Here we would set a trap to compute properties of the target object. These properties are properties whose values are calculated based on the properties of existing values.
Likewise, we have set() trap, to control behavior when the target object’s properties are set.
- apply() trap: To trap a function call.
- construct() trap: To trap usage of the new operator.
- isExtensible() trap: To trap call to Object.isExtensible.
- delete() trap: To trap when deleting property and the list goes on. You people can explore on these traps further.
- These agents ‘target’, ‘handler’,’trap’ will be helpful when the user wants to have control over data.
- User can able to spy on objects and ensure correct behavior of objects or functions.
- Useful in REST API calls, validation of data and monitoring Asynchronous functions.
- Also used in type checking and revocable references.