DEV Community

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

Posted on

6 1 1 1 1

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

AWS Q Developer image

Your AI Code Assistant

Generate and update README files, create data-flow diagrams, and keep your project fully documented. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️