Implementando getters e setters dinâmicos em JavaScript: um guia

No JavaScript tradicional, getters e setters são definidos para nomes de propriedades específicas. No entanto, é possível criar getters e setters dinâmicos mais flexíveis usando proxies introduzidos no ES2015.

Getters e setters dinâmicos com proxies

Getters e setters dinâmicos permitem acesso e modificação de propriedades sem definições explícitas. Veja como implementá-los 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";
      }
});

Exemplo de uso

Com o proxy acima instalado, o acesso e a modificação da propriedade podem ser realizados dinamicamente:

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

Compatibilidade entre navegadores

Proxies são suportados em navegadores modernos, como Chrome, Firefox e Safari. No entanto, para navegadores mais antigos que não suportam proxies, uma solução alternativa pode ser implementada usando a sintaxe getter/setter dinâmica sem proxies.