Objetos superpoderosos usando Proxy no JavaScript

O objeto Proxy do JavaScript é usado para definir comportamentos customizados em operações como retorno, atribuição, enumeração etc. Ele pode ser usado em objetos convencionais, arrays, funções e até em outro Proxy.

Exemplo básico

O exemplo a seguir, é um Proxy mínimo, que tem o mesmo comportamento padrão. Retorna as propriedades e atribui elas sem nenhuma alteração.

const p = new Proxy({}, {
    get(obj, prop) {
        return obj[prop];
    },
    set(obj, prop, value) {
        obj[prop] = value;
    }
});

Exemplo customizado

Agora vamos criar um objeto com Proxy, mas que tem alguns superpoderes.

const person = new Proxy({}, {
    get(obj, prop) {
        if (prop === 'age') {
            const today = new Date();

            return today.getFullYear() - obj.yearOfBirth;
        } else return obj[prop];
    },
    set(obj, prop, value) {
        if (prop === 'yearOfBirth' && value <= 0) throw new Error('A idade deve ser maior que 0');
        obj[prop] = value;
    }
});

As propriedades do objeto são atribuídas da mesma maneira que um objeto normal.

person.name = 'João da Silva';
person.yearOfBirth = 2015;

get

A função get permite alterar o comportamento padrão de retorno. Observe acima que quando você quer retornar a propriedade "age" ela é calculada com base no ano de nascimento, as demais propriedades são retornadas normalmente.

person.age; // 10

Se atribuirmos "yearOfBirth" como 2015, "age" vai ser 10.

set

Com a função set podemos modificar o comportamento de atribuição. No exemplo acima, "yearOfBirth" tem que ser maior que 1, se não lançará um erro.

person.yearOfBirth = 2015; // Ok

person.yearOfBirth = 0; // Error: A idade deve ser maior que 0

Com Proxy as possibilidades são infinitas, você pode criar os controles e personalizações que você quiser para um objeto.