Proxy y Reflect de JavaScript

JavaScript los proxies permiten interceptar y modificar operaciones sobre objetos. Ofrecen una forma potente de mejorar tu programación haciendo que tu código sea más flexible y mantenible. Al aprender a usar proxies, puedes crear código más robusto y sofisticado, mejorando tus prácticas generales de programación en JavaScript.

Introducción al Proxy de JavaScript

Un objeto Proxy en JavaScript te permite añadir comportamiento personalizado a un objeto. Te permite interceptar y personalizar operaciones como el acceso a propiedades, la asignación y las llamadas a funciones. Esto es útil para registrar eventos, validar o modificar cómo funciona un objeto en tu aplicación.

Sintaxis de Proxy

---

const proxy = new Proxy(target, handler);

• target: El objeto original que quieres proxyear.
• handler: Un objeto que contiene traps para interceptar operaciones.

Entender el trap get

El trap get te permite interceptar intentos de acceso a propiedades en el objeto objetivo. A menudo se usa para registrar accesos o calcular dinámicamente propiedades basadas en las propiedades del objetivo.

Ejemplo:

---

Output appears here after Run.

Este código configura un proxy para registrar accesos a propiedades en un objeto.

• Handler: Define un trap get para registrar la propiedad accedida.
• Objeto objetivo: Contiene las propiedades name y age.
• Proxy: Envuelve el objeto target con el handler.

Cuando se accede a proxy.name, registra "Getting name" y devuelve "John". Esto es útil para supervisar o depurar accesos a propiedades.

Manipular operaciones de objetos con los traps set y apply

El trap set

El trap set puede imponer reglas para las asignaciones de propiedades, asegurando que las propiedades tengan tipos específicos o cumplan ciertas condiciones.

Ejemplo:

---

Output appears here after Run.

Este código configura un proxy para validar y registrar asignaciones de propiedades en un objeto.

• Handler: Define un trap set para comprobar la propiedad age con valores válidos y registrar los intentos de asignarla.
• Proxy: Envuelve el objeto target con el handler.

Cuando se asigna proxy.age, comprueba si es una edad válida (0-150). Si no lo es, registra un error y lanza una excepción.

El trap apply

El método apply en un Proxy de JavaScript intercepta llamadas a funciones. Toma tres argumentos:

1. target: La función original que se está llamando.
2. thisArg: El valor de this dentro de la función.
3. argumentsList: Un array de argumentos pasados a la función.

Ejemplo:

---

Output appears here after Run.

Este código configura un proxy para registrar llamadas a funciones y sus argumentos.

• Handler: Define un trap apply para registrar los argumentos cuando se llama a la función.
• Función: sum suma dos números.
• Proxy: Envuelve la función sum con el handler.

En el código proporcionado, el trap apply registra los argumentos y luego llama a la función original usando target.apply(thisArg, argumentsList). Esto es útil para registrar, depurar o modificar dinámicamente el comportamiento de una función.

WARNING

Los proxies de JavaScript son potentes, pero úsalos con prudencia. Abusar de los proxies puede hacer que tu código sea más difícil de entender y mantener. Ten en cuenta que los proxies introducen una ligera sobrecarga de rendimiento en comparación con los objetos nativos.

API Reflect

La API Reflect de JavaScript es un objeto integrado que proporciona métodos para operaciones de JavaScript interceptables. Estos métodos son similares a los que se encuentran en objetos como Object, Function y Array. El propósito principal de Reflect es hacer que las operaciones sean más predecibles y ayudar a los desarrolladores a escribir código más limpio.

Aquí tienes una explicación sencilla de algunos métodos clave de Reflect con ejemplos:

1. Reflect.get()

Este método se usa para obtener el valor de una propiedad de un objeto.

Ejemplo:

---

Output appears here after Run.

2. Reflect.set()

Este método se usa para establecer el valor de una propiedad en un objeto.

Ejemplo:

---

Output appears here after Run.

3. Reflect.has()

Este método comprueba si una propiedad existe en un objeto.

Ejemplo:

---

Output appears here after Run.

4. Reflect.deleteProperty()

Este método elimina una propiedad de un objeto.

Ejemplo:

---

Output appears here after Run.

5. Reflect.ownKeys()

Este método devuelve todas las claves de propiedades propias de un objeto.

Ejemplo:

---

Output appears here after Run.

6. Reflect.apply()

Este método llama a una función objetivo con los argumentos dados.

Ejemplo:

---

Output appears here after Run.

7. Reflect.construct()

Este método se usa para crear una nueva instancia de un objeto.

Ejemplo:

---

Output appears here after Run.

Estos ejemplos muestran cómo puedes usar los métodos de Reflect para realizar operaciones comunes sobre objetos de una forma más limpia y coherente.

Casos de uso prácticos de los proxies de JavaScript

Ejemplo 1: Inicialización automática de propiedades

Descripción: Usa proxies de JavaScript para inicializar automáticamente propiedades indefinidas en un objeto. Esto puede ser útil en situaciones en las que los objetos se rellenan dinámicamente con datos con el tiempo, como configuraciones o ajustes de usuario que quizá no estén definidos inicialmente.

---

Output appears here after Run.

Este código crea un proxy que comprueba si una propiedad existe en un objeto. Si no existe, el proxy establece automáticamente un valor predeterminado para ella. Esto es útil para evitar errores por propiedades ausentes.

Ejemplo 2: Control de acceso

Descripción: Los proxies pueden imponer permisos de lectura o escritura sobre las propiedades de un objeto. Este ejemplo demuestra un proxy que impide que ciertas propiedades se lean o escriban según reglas predefinidas, lo que resulta especialmente útil para gestionar el acceso a datos sensibles.

---

Output appears here after Run.

Este código protege un objeto controlando el acceso a sus propiedades. Bloquea la lectura de sensitiveData y evita cambiar las propiedades readOnly, ayudando a mantener los datos seguros.

Ejemplo 3: Registro y depuración

Descripción: Los proxies pueden usarse para registrar interacciones con un objeto, lo que ayuda en la depuración y supervisión de operaciones. Este ejemplo crea un proxy que registra todos los gets, sets y llamadas a métodos realizadas sobre un objeto.

---

Output appears here after Run.

Este código registra cada vez que alguien accede o cambia una propiedad del objeto, lo cual es ideal para entender qué está haciendo tu código y cuándo.

Ejemplo 4: Validación de datos

Descripción: Usa proxies para validar sobre la marcha las propiedades de un objeto. Esto es especialmente útil para garantizar la integridad de los datos cuando los objetos se actualizan dinámicamente en una aplicación.

---

Output appears here after Run.

Este ejemplo demuestra cómo usar Proxy de JavaScript para validar y registrar cambios de propiedades. El objeto validator comprueba si la propiedad age es un número válido entre 0 y 150. Si no lo es, registra un error y lanza una excepción. De lo contrario, registra el nuevo valor y actualiza la propiedad. El objeto person usa este validador para gestionar su propiedad age, asegurando que las edades inválidas se detecten y registren.

Conclusión

Dominar los proxies de JavaScript te permite controlar y mejorar el comportamiento de tu código. Los proxies pueden mejorar la seguridad, añadir comportamiento personalizado a clases y mejorar las herramientas de depuración. Ayudan a crear aplicaciones más dinámicas y seguras, dando lugar a código más limpio, eficiente y mantenible. Este conocimiento elevará tus habilidades de desarrollo en JavaScript y te preparará para afrontar los retos web modernos.

Practice

What is the main functionality of JavaScript's Proxy and Reflect objects?

They allow to handle fundamental operations on objectsThey enable addition of arbitrary properties to a functionThey are primarily used to manipulate array elementsThey provide access to object's built-in functionalityThey are used to manipulate string values