Casos prácticos de uso de Proxy
Cree objetos con validación, registro y reactividad.
Casos prácticos de uso de Proxy es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
Proxies en la práctica
Ahora combinará proxies y Reflect para resolver problemas reales: validación, registro, valores predeterminados y mucho más. Cada patrón envuelve un objeto simple sin modificarlo.
Wrapper de validación
Aplique un esquema: rechace cualquier escritura que no cumpla una regla. El target se mantiene limpio porque los datos incorrectos nunca llegan a almacenarse.
function validated(obj, rules) {
return new Proxy(obj, {
set(target, prop, value, receiver) {
const rule = rules[prop];
if (rule && !rule(value)) {
throw new TypeError('invalid value for ' + prop);
}
return Reflect.set(target, prop, value, receiver);
}
});
}
const user = validated({}, { age: v => v >= 0 });
user.age = 25;
console.log(user.age);
try { user.age = -1; } catch (e) { console.log(e.message); }Wrapper de registro
Rastree cada lectura y escritura para depurar, reenviando la operación mediante Reflect después de registrarla.
function logged(obj) {
return new Proxy(obj, {
get(t, p, r) { console.log('GET ' + p); return Reflect.get(t, p, r); },
set(t, p, v, r) { console.log('SET ' + p + '=' + v); return Reflect.set(t, p, v, r); }
});
}
const data = logged({ count: 0 });
data.count = 5;
console.log(data.count);Valores predeterminados
Devuelva un valor alternativo para cualquier propiedad que falte, de modo que las lecturas nunca produzcan undefined.
function withDefault(obj, fallback) {
return new Proxy(obj, {
get(t, p, r) {
return p in t ? Reflect.get(t, p, r) : fallback;
}
});
}
const scores = withDefault({ ada: 90 }, 0);
console.log(scores.ada);
console.log(scores.unknown);Índices negativos de arrays
Haga que los arrays admitan índices negativos al estilo de Python traduciéndolos en una trampa get.
function negIndex(arr) {
return new Proxy(arr, {
get(t, p, r) {
const i = Number(p);
if (Number.isInteger(i) && i < 0) {
return Reflect.get(t, t.length + i, r);
}
return Reflect.get(t, p, r);
}
});
}
const list = negIndex(['a', 'b', 'c']);
console.log(list[-1]);
console.log(list[0]);Vista de solo lectura
Exponga un objeto que se pueda leer, pero nunca modificar; resulta útil para proteger una configuración compartida.
function readonly(obj) {
return new Proxy(obj, {
set() { console.log('blocked write'); return false; },
deleteProperty() { console.log('blocked delete'); return false; }
});
}
const config = readonly({ apiUrl: '/api' });
config.apiUrl = '/hacked';
console.log(config.apiUrl);Contar accesos
Registre cuántas veces se lee cada propiedad almacenando los recuentos fuera del target.
function counted(obj) {
const counts = {};
const proxy = new Proxy(obj, {
get(t, p, r) {
counts[p] = (counts[p] || 0) + 1;
return Reflect.get(t, p, r);
}
});
return { proxy, counts };
}
const { proxy, counts } = counted({ x: 1 });
proxy.x; proxy.x; proxy.x;
console.log(counts.x);Propiedades virtuales calculadas
Exponga valores derivados que no se almacenan, sino que se calculan de nuevo con cada lectura.
const rect = new Proxy({ width: 4, height: 3 }, {
get(t, p, r) {
if (p === 'area') return t.width * t.height;
return Reflect.get(t, p, r);
}
});
console.log(rect.area);
rect.width = 10;
console.log(rect.area);Lanzar errores al leer propiedades desconocidas
Detecte pronto los errores tipográficos lanzando una excepción cuando el código lea una propiedad que no existe.
function strict(obj) {
return new Proxy(obj, {
get(t, p, r) {
if (typeof p === 'string' && !(p in t)) {
throw new ReferenceError('unknown property: ' + p);
}
return Reflect.get(t, p, r);
}
});
}
const o = strict({ name: 'Ada' });
console.log(o.name);
try { console.log(o.naem); } catch (e) { console.log(e.message); }Combinar responsabilidades
Los wrappers reales suelen combinar validación y registro en un mismo handler, y cada trampa reenvía la operación a Reflect.
const account = new Proxy({ balance: 0 }, {
set(t, p, v, r) {
if (p === 'balance' && v < 0) throw new RangeError('no overdraft');
console.log(p + ' set to ' + v);
return Reflect.set(t, p, v, r);
}
});
account.balance = 100;
console.log(account.balance);
try { account.balance = -50; } catch (e) { console.log(e.message); }Por qué importan estos patrones
Los proxies añaden comportamientos transversales, validación, registro, valores predeterminados y control de acceso sin contaminar el objeto original ni el código que lo utiliza. Así es exactamente como los frameworks reactivos observan los cambios de estado. Úselos cuando necesite una intercepción transparente.
const observed = new Proxy({ n: 0 }, {
set(t, p, v, r) {
const ok = Reflect.set(t, p, v, r);
console.log(p + ' is now ' + t[p]);
return ok;
}
});
observed.n = 1;
observed.n = 2;Comprobación rápida
¿Qué trampa de proxy usaría para rechazar valores no válidos antes de almacenarlos?
Repaso: casos de uso prácticos de Proxy
Ha aplicado proxies a problemas reales:
- La validación en la trampa set rechaza los datos incorrectos.
- El registro rastrea las lecturas y escrituras mediante
Reflect. - Los valores predeterminados y las propiedades virtuales se implementan en la trampa get.
- Las vistas de solo lectura, el recuento de accesos y la comprobación estricta de errores tipográficos envuelven objetos de forma transparente.
Preguntas frecuentes
¿La lección «Casos prácticos de uso de Proxy» es gratis?
Sí — el texto completo de «Casos prácticos de uso de Proxy» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Casos prácticos de uso de Proxy»?
Cree objetos con validación, registro y reactividad. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Casos prácticos de uso de Proxy»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Creación de un Proxy
- Trampas get y set
- La API Reflect
- Casos prácticos de uso de Proxy