Proxy represents an object that allows you to intercept the execution of operations in relation to some object and override its behavior.
Let’s create a Proxy Object:
const proxy = new Proxy(target, handler);
target – the target of creating the proxy, it can be any object to which the proxy is applied
handler – another object that determines exactly which operations of the target object will be intercepted and overridden and how.
Let’s look at an example:
//the object to which the proxy is applied
const target = { name: "Tom" };
//an object that determines how target will be predefined
const handler = {};
//proxy object
const proxy = new Proxy(target, handler);
console.log(proxy.name); // Tom
Overriding object functionality
The key in this case is the definition of the handler handler, which can intercept property calls proxied object. This handler can define two methods: get and set.
Method get
The get method intercepts calls to the property when getting its value and returns some value for this property meaning:
const handler = {
get: function (target, prop, receiver) {
return;
}
};
target – the proxied object
prop – the name of the property being accessed
receiver – the Proxy object through which proxying is performed
Let’s look at an example:
const target = { name: "Tom" };
const handler = {
get: function (target, prop, receiver) {
return "Tomas Smith";
}
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); // Tomas Smith
In this case, we can also communicate with the original object that is being proxied:
const target = { name: "Tom" };
const handler = {
get: function (target, prop) {
return "Name: " + target.name;
}
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); // Name: Tom
Let’s take a more complex object – with two properties:
const target = { name: "Alexander", age: 33 };
const handler = {
get: function (target, prop) {
return target[prop];
}
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); // Alexander
console.log(proxy.age); // 33
!To access the properties of the target object, the syntax of arrays is used.
We can check which property is being accessed and do some overriding:
const target = { name: "Alexander", age: 33 };
const handler = {
get: function (target, prop) {
if (prop === "name")
return target.name.toUpperCase();
else
return target[prop];
}
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); //Alexander
console.log(proxy.age); //33
Method set
The set method intercepts calls to the property when setting its value:
const handler = {
set: function (target, property, value, receiver) {
}
};
target – the original object to which the proxy is going
property – the name of the property being accessed
value – the value we want to set
receiver – the proxy object through which proxying is performed
Let’s look at an example:
const target = { name: "Alexander", age: 33 };
const handler = {
set: function (target, prop, value) {
console.log(value);
target[prop] = value;
}
};
const proxy = new Proxy(target, handler);
proxy.name = "Tomas";
console.log(proxy.name); // Tomas
proxy.age = 22;
console.log(proxy.age); // 22
Another example:
const target = { name: "Alexander", age: 33 };
const handler = {
set: function (target, prop, value) {
if (prop === "age" && value < 1)
console.log("wrong age");
else
return target[prop] = value;
}
};
const proxy = new Proxy(target, handler);
proxy.name = "Tomas";
console.log(proxy.name); // Tomas
proxy.age = -199; // wrong age
console.log(proxy.age); // 33
proxy.age = 22;
console.log(proxy.age); // 22