🛡️ Proxy = Object Interception
Objects are exposed. Proxy intercepts operations. Validation, logging, reactivity, access control.
📝 Proxy Basics
// Basic proxy
const target = { name: 'Alice', age: 30 };
const handler = {
get: function(obj, prop) {
console.log(`Getting ${prop}`);
return obj[prop];
},
set: function(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
proxy.age = 31; // Logs: Setting age to 31
// Validation proxy
const userValidator = {
set: function(obj, prop, value) {
if (prop === 'age') {
if (typeof value !== 'number' || value < 0 || value > 120) {
throw new Error('Invalid age');
}
}
if (prop === 'email') {
if (!value.includes('@')) {
throw new Error('Invalid email');
}
}
obj[prop] = value;
return true;
}
};
const user = new Proxy({}, userValidator);
user.age = 30; // OK
user.email = 'test@example.com'; // OK
// user.age = -5; // Throws Error
// Read-only proxy
const readOnlyHandler = {
set: function(obj, prop, value) {
throw new Error(`Cannot modify ${prop}`);
}
};
const config = new Proxy({ apiKey: 'secret' }, readOnlyHandler);
// config.apiKey = 'new'; // Throws Error
🎯 Advanced Proxy
// Reactive proxy (Vue-like)
function reactive(obj) {
return new Proxy(obj, {
get(target, key) {
// Track dependency
track(target, key);
return target[key];
},
set(target, key, value) {
target[key] = value;
// Trigger updates
trigger(target, key);
return true;
}
});
}
// Auto-generate getters/setters
class AutoProxy {
constructor(target) {
return new Proxy(target, {
get: function(obj, prop) {
if (prop in obj) return obj[prop];
console.warn(`Property ${prop} doesn't exist`);
return undefined;
}
});
}
}
💡 Proxy Use Cases
- Validation
- Reactivity (Vue, Svelte)
- API caching
- Logging
- Access control
“Proxy enables object interception. Validation, reactivity, logging. Essential for advanced JavaScript.”
