Implementación de captadores y definidores dinámicos en JavaScript: una guía

En JavaScript tradicional, los captadores y definidores se definen para nombres de propiedades específicos. Sin embargo, es posible crear captadores y definidores dinámicos más flexibles utilizando proxies introducidos en ES2015.

Obtenedores y definidores dinámicos con proxys

Los captadores y definidores dinámicos permiten el acceso y la modificación de propiedades sin definiciones explícitas. Aquí se explica cómo implementarlos usando proxies:

"use strict";
if (typeof Proxy == "undefined") {
    throw new Error("This browser doesn't support Proxy");
}
let original = {
    example: "value",
};
let proxy = new Proxy(original, {
    get(target, name, receiver) {
        if (Reflect.has(target, name)) {
            let rv = Reflect.get(target, name, receiver);
            // Modify the value here before returning
            return rv;
        }
        // Define default behavior for unknown properties
        return "missing";
      }
});

Ejemplo de uso

Con el proxy anterior implementado, el acceso y la modificación de la propiedad se pueden realizar dinámicamente:

console.log(`proxy.example = ${proxy.example}`); // "proxy.example = VALUE"
console.log(`proxy.unknown = ${proxy.unknown}`); // "proxy.unknown = missing"

Compatibilidad entre navegadores

Los servidores proxy son compatibles con navegadores modernos como Chrome, Firefox y Safari. Sin embargo, para los navegadores más antiguos que no admiten servidores proxy, se puede implementar una solución utilizando la sintaxis dinámica de captador/definidor sin servidores proxy.