A JavaScript Proxy is an object that wraps another object and intercepts the fundamental operations of the target object.
syntax:
let proxy = new Proxy(target, handler);
-
target
– is an object to wrap, can be anything, including functions. -
handler
– proxy configuration: an object with “traps”, methods that intercept operations. – e.g.get
trap for reading a property oftarget
,set
trap for writing a property intotarget
, and so on.
Let's look a quick example by defining an object called user:
const user = {
firstName: 'suprabha',
lastName: 'supi',
}
// defining a handler function
const handler = {}
// now, create a proxy
const userProxy = new Proxy(user, handler);
userProxy
object uses the user
object to store data. The userProxy
can access all properties of the user
object.
Let’s see the output:
console.log(userProxy.firstName); // suprabha
console.log(userProxy.lastName); // supi
If you modify the original object user
, the change is reflected in the userProxy
user.firstName = 'sam';
console.log(userProxy.firstName); // sam
Similarly, a change in the userProxy
object will be reflected in the original object user
:
proxyUser.lastName = 's';
console.log(user.lastName); // s
There are methods in proxy, here we will cover most important methods:
- get
- set
- apply
1️⃣ get:
The handler.get()
method is a trap for getting a property value.
Also you can make the changes using get
:
const user = {
firstName: 'suprabha',
lastName: 'supi',
}
// defining a handler function
const handler = {
get(target, prop, receiver) {
return "sumi";
}
}
// now, create a proxy
const userProxy = new Proxy(user, handler);
console.log(userProxy.firstName) // sumi
console.log(userProxy.lastName) // sumi
As of now we don’t have fullUserName
in user object, so let’s create it in proxy using get
trap:
const user = {
firstName: 'suprabha',
lastName: 'supi',
}
const handler = {
get(target, property) {
return property === 'fullUserName' ?
`${target.firstName} ${target.lastName}` :
target[property]
}
};
const userProxy = new Proxy(user, handler)
console.log(userProxy.fullUserName) // suprabha supi
2️⃣ set:
set
trap controls behaviour when a property of the target
object is set.
So, let’s say you have to add some condition, so you can do it in set
trap.
const user = {
firstName: 'suprabha',
lastName: 'supi',
age: 15
}
const handler = {
set(target, property, value) {
if (property === 'age') {
if (typeof value !== 'number') {
throw new Error('Age should be in number!');
}
if (value < 18) {
throw new Error('The user must be 18 or older!')
}
}
target[property] = value;
}
};
const userProxy = new Proxy(user, handler);
// if you try to set age to bool, you will get error
userProxy.age = true;
// Error: Age must be a number.
userProxy.age = '16';
// The user must be 18 or older.
userProxy.age = '20'
// no errors would be found
3️⃣ apply
The handler.apply()
method is a trap for a function call. Here is the syntax:
let proxy = new Proxy(target, {
apply: function(target, thisArg, args) {
//...
}
});
Now, lets follow the above example by captialzing the first and last name.
const user = {
firstName: 'suprabha',
lastName: 'supi'
}
const getFullName = function (user) {
return `${user.firstName} ${user.lastName}`;
}
const getFullNameProxy = new Proxy(getFullName, {
apply(target, thisArg, args) {
return target(...args).toUpperCase();
}
});
console.log(getFullNameProxy(user)); // SUPRABHA SUPI
Top comments (3)
This kind of guides are very useful for the beginners. I have had a hard time, trying to make this code work, a lot of errors and I just wasn't able to find a good solution for them. Now it's more clear how I should have acted. There are still a lot of things for me to learn in codding, and speedproxies.net/residential-proxies helps me a lot in it. I can have access to some sources of information which are limited in my country, but using a residential proxy makes it possible.
Thank you ☺️
Thanks for sharing this, helped me a lot.