DEV Community

Cover image for JavaScript: Interceptando objetos com Proxy
Cristian Magalhães
Cristian Magalhães

Posted on

JavaScript: Interceptando objetos com Proxy

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?

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

Enter fullscreen mode Exit fullscreen mode

É 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


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.

thank you dog

Top comments (0)