JavaScript: Interceptando objetos com Proxy

This content originally appeared on DEV Community and was authored by Cristian Magalhães

Eae gente bonita, beleza? Continuando a nossa série de posts descobrindo novas funções no JavaScript dessa vez irei falar sobre o Proxy e como usar suas funções mais básicas para poder interceptar ações em objetos.

Tabela de conteúdos

• Como assim interceptar?
• Na prática
• Conclusão
• Referências

Como assim interceptar?

Bom caso você não saiba exatamente do que estou falando nós vamos “participar” ou melhor dizendo executar uma função entre o momento que a ação de ler ou atribuir valores é feita até a sua conclusão e para isso iremos ultilizar o objeto Proxy.

É importante dizer que não vou passar método a método do objeto. A ideia é conhecer ele e ir explorando conforme a necessidade.

Na prática

Vamos ao que interessa, executar o código e ver na prática tudo funcionando, abaixo vou colocar um trecho de código com o proxy interceptando as ações dos objetos e algumas explicações

const pessoa = {
    nome: 'Cristian',
    saldo: 0,
    idade: 25
};

const objetoComProxy = new Proxy(pessoa, {
    set: (target, propertyKey, newValue) => {
        console.log('set', { target, propertyKey, newValue })
        target[propertyKey] = newValue;
    },
    get: (object, prop) => {
        console.log('get', { object, prop })
        return object[prop]
    },
});

pessoa.saldo = 100 // nada acontece, nenhum log é mostrado

// primeiro o get será logado para buscar o valor da propriedade e em seguida o set
// pois estamos usando o objeto com proxy
objetoComProxy.saldo += 100; 
/**
 * LOG:
 * get { object: { nome: 'Cristian', saldo: 100, idade: 25 }, prop: 'saldo' }
    set {
    target: { nome: 'Cristian', saldo: 100, idade: 25 },
    propertyKey: 'saldo',
    newValue: 200
    }
 */

console.log(objetoComProxy.nome); // get { object: { nome: 'Cristian', saldo: 200, idade: 25 }, prop: 'nome' } e depois Cristian

É importante notar que apesar do objeto original ter sido alterado também as funções do Proxy não são executadas, apenas no objeto “proxyado”.

Conclusão

Apesar de um texto bem simples a ideia de hoje foi poder conhecer sobre o Proxy e também aumentar a nossa caixa de ferramentas do JavaScript. Fique a vontade para deixar dúvidas e sugestões.

Referências

• Proxy MDN

Espero que tenha sido claro e tenha ajudado a entender um pouco mais sobre o assunto, fique a vontade para dúvidas e sugestões abaixo!

Se chegou até aqui, me segue la nas redes vizinhas.

This content originally appeared on DEV Community and was authored by Cristian Magalhães