JavaScript Academy · Lección

Trampas get y set

Personalice la lectura y escritura de propiedades.

Trampas get y set es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 2 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.

Las trampas get y set

Las trampas get y set son los hooks de proxy más utilizados. Interceptan la lectura y escritura de propiedades, lo que permite transformar valores, validar datos de entrada o registrar accesos.

Firma de la trampa get

get(target, property, receiver) se ejecuta con cada lectura de una propiedad. Devuelva lo que quiera que vea quien realiza la llamada.

const proxy = new Proxy({ price: 10 }, {
  get(target, prop) {
    return target[prop];
  }
});

console.log(proxy.price);

Valores predeterminados mediante get

Una trampa get puede proporcionar un valor alternativo para las propiedades que faltan, en lugar de devolver undefined.

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

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

Transformar valores al leer

La trampa get puede modificar los valores antes de devolverlos, por ejemplo, convirtiendo las cadenas a mayúsculas.

const proxy = new Proxy({ name: 'ada' }, {
  get(target, prop) {
    const value = target[prop];
    return typeof value === 'string' ? value.toUpperCase() : value;
  }
});

console.log(proxy.name);

Firma de la trampa set

set(target, property, value, receiver) se ejecuta con cada escritura. Debe devolver true si la operación se realiza correctamente; de lo contrario, el modo estricto lanza una excepción.

const proxy = new Proxy({}, {
  set(target, prop, value) {
    target[prop] = value;
    return true;
  }
});

proxy.x = 5;
console.log(proxy.x);

Validación en set

El uso clásico de una trampa set es la validación: rechazar valores no válidos antes de que lleguen al target.

const person = new Proxy({}, {
  set(target, prop, value) {
    if (prop === 'age' && (typeof value !== 'number' || value < 0)) {
      throw new TypeError('age must be a non-negative number');
    }
    target[prop] = value;
    return true;
  }
});

person.age = 30;
console.log(person.age);
try { person.age = -5; } catch (e) { console.log(e.message); }

Convertir valores en set

Además de rechazar valores, una trampa set puede normalizar los datos de entrada; por ejemplo, eliminando los espacios de las cadenas antes de almacenarlas.

const proxy = new Proxy({}, {
  set(target, prop, value) {
    target[prop] = typeof value === 'string' ? value.trim() : value;
    return true;
  }
});

proxy.name = '   Ada   ';
console.log('[' + proxy.name + ']');

Registrar ambas operaciones

Combine get y set para rastrear cada acceso. Esto resulta muy útil para depurar cómo se utiliza un objeto.

const proxy = new Proxy({ v: 1 }, {
  get(target, prop) {
    console.log('GET ' + prop);
    return target[prop];
  },
  set(target, prop, value) {
    console.log('SET ' + prop + ' = ' + value);
    target[prop] = value;
    return true;
  }
});

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

Imponer solo lectura

Una trampa set que rechaza siempre las escrituras convierte el proxy en una vista de solo lectura de su target.

const readonly = new Proxy({ pi: 3.14 }, {
  set() {
    console.log('writes are blocked');
    return false;
  }
});

try {
  'use strict';
  readonly.pi = 0;
} catch (e) {
  console.log(e.name);
}
console.log(readonly.pi);

Claves Symbol y elementos internos

Las trampas también se activan para las claves de tipo Symbol. Tenga cuidado: registrar todas las propiedades, incluidos los símbolos internos, puede generar demasiado ruido, así que filtre cuando sea necesario.

const proxy = new Proxy({ a: 1 }, {
  get(target, prop) {
    if (typeof prop === 'string') console.log('reading ' + prop);
    return target[prop];
  }
});

console.log(proxy.a);

Por qué importan get y set

Juntas, estas trampas permiten usar validaciones, propiedades calculadas, valores predeterminados, registros y reactividad, todo ello sin modificar el target. Sin embargo, escribir manualmente target[prop] = value dentro de las trampas tiene ciertos casos límite. La API Reflect, que verá a continuación, los gestiona correctamente.

const tracked = new Proxy({ total: 0 }, {
  set(target, prop, value) {
    console.log(prop + ' changed to ' + value);
    target[prop] = value;
    return true;
  }
});
tracked.total = 100;
console.log(tracked.total);

Comprobación rápida

¿Qué debe devolver una trampa set para indicar que una asignación se realizó correctamente?

Repaso: trampas get y set

Ha aprendido las trampas de proxy fundamentales:

get(target, prop, receiver) intercepta las lecturas; puede devolver cualquier valor.
set(target, prop, value, receiver) intercepta las escrituras; devuelve true cuando la operación se realiza correctamente.
Úselas para valores predeterminados, transformaciones, validaciones y registros.
Para gestionar correctamente las operaciones internas dentro de las trampas, use Reflect, que verá a continuación.

Preguntas frecuentes

¿La lección «Trampas get y set» es gratis?

Sí — el texto completo de «Trampas get y set» 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 «Trampas get y set»?

Personalice la lectura y escritura de propiedades. 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 2 de 4.

¿Cuánto tiempo toma la lección «Trampas get y set»?

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