5 min read
•Question 31 of 50hardWhat are Proxy and Reflect in JavaScript?
Understanding metaprogramming with Proxy and Reflect.
What You'll Learn
- Creating proxies
- Handler traps
- Using Reflect API
Proxy
Wraps an object to intercept and customize operations.
code.jsJavaScript
const target = { name: 'John', age: 30 };
const handler = {
get(obj, prop) {
console.log(`Getting ${prop}`);
return prop in obj ? obj[prop] : 'Property not found';
},
set(obj, prop, value) {
console.log(`Setting ${prop} to ${value}`);
obj[prop] = value;
return true;
}
};
const proxy = new Proxy(target, handler);
proxy.name; // Logs: 'Getting name', Returns: 'John'
proxy.unknown; // Logs: 'Getting unknown', Returns: 'Property not found'
proxy.city = 'NYC'; // Logs: 'Setting city to NYC'Common Traps
code.jsJavaScript
const handler = {
get(target, prop, receiver) { },
set(target, prop, value, receiver) { },
has(target, prop) { }, // 'prop' in proxy
deleteProperty(target, prop) { }, // delete proxy.prop
apply(target, thisArg, args) { }, // proxy()
construct(target, args) { } // new proxy()
};Validation Example
code.jsJavaScript
const validator = {
set(obj, prop, value) {
if (prop === 'age') {
if (typeof value !== 'number') {
throw new TypeError('Age must be a number');
}
if (value < 0 || value > 150) {
throw new RangeError('Age must be 0-150');
}
}
obj[prop] = value;
return true;
}
};
const person = new Proxy({}, validator);
person.age = 30; // OK
person.age = -1; // RangeErrorReflect API
code.jsJavaScript
// Use Reflect in handlers for default behavior
const handler = {
get(target, prop, receiver) {
console.log('Intercepted');
return Reflect.get(target, prop, receiver);
}
};