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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay