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
É 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.
Top comments (0)