JavaScript Academy · Lección

Creación de un Proxy

Envuelva objetos para interceptar operaciones.

Creación de un Proxy es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 1 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.

¿Qué es un Proxy?

Un Proxy envuelve un objeto y permite interceptar operaciones fundamentales, como leer, escribir y eliminar propiedades.

Puede crear uno con new Proxy(target, handler), donde el handler define trampas que personalizan el comportamiento.

Un handler vacío

Con un handler vacío, el proxy se comporta exactamente como el target. Todas las operaciones pasan directamente al objeto original.

const target = { greeting: 'hello' };
const proxy = new Proxy(target, {});

console.log(proxy.greeting);
proxy.greeting = 'hi';
console.log(target.greeting);

Target y Proxy comparten el estado

El proxy no copia el target. Ambos hacen referencia al mismo objeto subyacente, por lo que un cambio realizado a través de cualquiera de ellos es visible en ambos.

const target = { count: 0 };
const proxy = new Proxy(target, {});

proxy.count = 5;
console.log(target.count);
target.count = 10;
console.log(proxy.count);

Añadir una trampa get

La trampa get intercepta las lecturas de propiedades. En este caso, cada lectura se registra antes de devolver el valor.

const proxy = new Proxy({ name: 'Ada' }, {
  get(target, prop) {
    console.log('reading ' + prop);
    return target[prop];
  }
});

console.log(proxy.name);

Parámetros de la trampa

La trampa get recibe el target, el nombre de la property y el receiver (el proxy). Usted decide qué devolver.

const proxy = new Proxy({ a: 1 }, {
  get(target, prop) {
    return prop in target ? target[prop] : 'missing';
  }
});

console.log(proxy.a);
console.log(proxy.b);

Propiedades calculadas al leer

Una trampa get puede devolver valores que el target no almacena realmente y calcularlos sobre la marcha.

const proxy = new Proxy({ first: 'Ada', last: 'Lovelace' }, {
  get(target, prop) {
    if (prop === 'full') return target.first + ' ' + target.last;
    return target[prop];
  }
});

console.log(proxy.full);

Añadir una trampa set

La trampa set intercepta las escrituras. Debe devolver true para indicar que la operación se realizó correctamente; de lo contrario, la asignación se considera fallida.

const proxy = new Proxy({}, {
  set(target, prop, value) {
    console.log('setting ' + prop + ' = ' + value);
    target[prop] = value;
    return true;
  }
});

proxy.score = 42;
console.log(proxy.score);

La trampa has

La trampa has intercepta el operador in, lo que permite personalizar las comprobaciones de pertenencia.

const proxy = new Proxy({ a: 1 }, {
  has(target, prop) {
    console.log('checking ' + prop);
    return prop in target;
  }
});

console.log('a' in proxy);
console.log('b' in proxy);

La trampa deleteProperty

La trampa deleteProperty intercepta delete. Devuelva true si la operación se realiza correctamente.

const proxy = new Proxy({ secret: 'x', ok: 'y' }, {
  deleteProperty(target, prop) {
    console.log('deleting ' + prop);
    delete target[prop];
    return true;
  }
});

delete proxy.secret;
console.log(Object.keys(proxy));

Hay muchas trampas disponibles

Además de get y set, los proxies admiten trampas para has, deleteProperty, ownKeys, apply (para funciones), construct y otras operaciones. Solo tiene que implementar las que necesite.

const proxy = new Proxy({ x: 1, y: 2 }, {
  ownKeys(target) {
    console.log('listing keys');
    return Object.keys(target);
  }
});

console.log(Object.keys(proxy));

Por qué son importantes los proxies

Los proxies permiten añadir validación, registro, valores predeterminados y reactividad sin modificar el objeto target. Son la base de sistemas de reactividad como el de Vue. A continuación profundizará en las trampas get y set.

const logged = new Proxy({ v: 0 }, {
  get: (t, p) => { console.log('get ' + p); return t[p]; },
  set: (t, p, val) => { console.log('set ' + p); t[p] = val; return true; }
});
logged.v = 9;
console.log(logged.v);

Comprobación rápida

¿Qué crea new Proxy(target, handler)?

Repaso: creación de un Proxy

Ha aprendido a interceptar operaciones de objetos:

new Proxy(target, handler) envuelve un objeto con trampas.
Un handler vacío deja pasar todas las operaciones; el proxy y el target comparten el estado.
Trampas habituales: get, set, has, deleteProperty y ownKeys.
Las trampas set y delete deben devolver true cuando la operación se realiza correctamente.

Preguntas frecuentes

¿La lección «Creación de un Proxy» es gratis?

Sí — el texto completo de «Creación de un 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 «Creación de un Proxy»?

Envuelva objetos para interceptar operaciones. 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 1 de 4.

¿Cuánto tiempo toma la lección «Creación de un 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

← Volver a JavaScript Academy