Updated March 30, 2023
Introduction to ES6 Proxy
The ES6 proxy is between the code and an object using as an ES6 proxies site, but we can use a proxy to do meta-programming activities like intercepting a call to examine or change the properties of an object with certain properties or methods called as the functions which are defined as the handler with certain properties or methods are called and functions defined in the handler offer access to the target.
What is an ES6 proxy?
The ES6 proxy is placed between the middle of the code and an object. We can use a proxy to do meta-programming activities like intercepting a call to examine or change the properties of an object. When it comes to ES6 proxies, it has followed the certain nomenclature is used like a target. The proxy will virtualize the original object.
How to use Proxies?
The Proxies are generally meant by the specific computing terms like intermediaries between the objects with which we can communicate. Then the proxy server is meant by the device that sits between the web browser like (Chrome, Firefox, Safari, Edge, and so on) also the webserver like (Apache, Nginx, IIS, and so on) whereas the webpage is to be stored in the cookies and histories. The client requests and the response answers can be modified by using the proxy server. It can be boosted and efficient by caching frequently visited items and providing them to numerous users.
It has a number of proxy trap types like mainly get and set methods are the most useful traps. The other traps like proxy and supplement proxy handler codes. A Proxy is an object that wraps around another object (target) and intercepts the target object’s basic operations. Property search, assignment, enumeration, and function invocations are examples of basic operations.
How does ES6 Proxy work?
Generally, the ES6 module is a container for a group of JavaScript codes that can be related to one another. Especially the module’s variables and functions should be exported so that they can be accessible from the other files. However, in ES6 scripts, the modules can only be used in the strict mode. This means that the variables and functions are declared in a module that cannot be globally accessible. Mainly it focuses on the target and handler; the target is the original object that can be used for proxy wanted, and the handler is the kind of the object that can be defined the specified operations will be more intercepted and redefined the intercepted operations.
Target:
The proxy will virtualize the original object. And this could be a source JavaScript object and like the jQuery library, native objects, like arrays, or even other proxies which may be used on the servers.
Handler:
An object that can be used for to implement the proxy’s behavior. Now we’ll make a handler object that will intercept all get operations.
Traps:
When certain properties or methods are called, the functions are defined as the handler, and the offer may access the target.
Examples of ES6 Proxy
Different examples are mentioned below:
Example #1
Code:
<!DOCTYPE html>
<html>
<body>
<p id="one"></p>
<script>
function mthd1(x, y) {
var a = Object.getOwnPropertyDescriptor(
y.prototype, 'constructor'
);
y.prototype = Object.create(x.prototype);
var handler = {
construct: function(target, args) {
var obj = Object.create(y.prototype);
this.apply(target, obj, args);
return obj;
},
apply: function(target, c, args) {
x.apply(c, args);
y.apply(c, args);
}
};
var prx = new Proxy(y, handler);
a.value = prx;
Object.defineProperty(y.prototype, 'constructor', a);
return prx;
}
var v = function(n) {
this.n = n;
};
var w = mthd1(v, function(n, sno) {
this.sno = sno;
});
w.prototype.cty = 'T';
var ins = new w('ins', 32);
document.getElementById("one").innerHTML = ins.cty;
document.getElementById("one").innerHTML = ins.n;
document.getElementById("one").innerHTML = ins.sno;
let trg = {};
let prx = new Proxy(trg, {});
prx.tst = 3;
alert(trg.tst);
alert(prx.tst);
for(let k in prx) alert(k);
</script>
</body>
</html>Output:
In the above example, we used the Proxy object and the handler concept to create and handle user datas. It can be mainly classified to the object wrapping and intercept operations like reading and writing properties and other features. Basically, it handles the object them on its own; it allows for to transparently objects handled them.
Example #2
Code:
<!DOCTYPE html>
<html>
<body>
<p id="one"></p>
<script>
const hnd = {
get: function(a, b) {
return b in a ?
a[b] :
45;
}
};
const obje = new Proxy({}, hnd);
obje.x = 1;
obje.y = undefined;
document.getElementById("one").innerHTML = obje.x, obje.y;
document.getElementById("one").innerHTML = 'z' in obje, obje.z;
const target = {};
const ins = new Proxy(target, {});
ins.e = 73;
document.getElementById("one").innerHTML = target.e;
</script>
</body>
</html>Output:
In the above example, we used the same Proxy object with all the html dom elements in the stack. The default value is whenever the property name is not in the object creation. It will be used as the get() handler method. Mainly, we are using native import JavaScript objects for which the proxy will be forwarded to all the user operations that are applied to it on the programming logic, including both UI and backend validations. And also, please note that while we use any looping conditional statements, the javascript objects work as a no-op, and it does not mean the native browser objects like DOM Elements.
New Proxy to intercept the operation
We can use a proxy for to intercept the multiple user operations mainly used as the following methods like,
- get (getting property values)
- apply (calling a function)
But it does not perform any single operation for calling the methods that can be intercepted. This is why method calls are split into two steps: first, we can use get to obtain a function, and then it can apply it for specific operations.
Conclusion
A proxy object which “traps” for invocations and users performed the multiple operations made to its target object. And which it can be subsequently passed through the no-operations and handled more elegantly. It can erect an impenetrable barrier around the target object, redirecting to all the operations specified mapping to the handler.
Recommended Articles
This is a guide to ES6 Proxy. Here we discuss how ES6 Proxy works and examples, and the codes and outputs. You may also have a look at the following articles to learn more –
