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
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
Cristian Magalhães | Sciencx (2024-06-28T11:58:31+00:00) JavaScript: Interceptando objetos com Proxy. Retrieved from https://www.scien.cx/2024/06/28/javascript-interceptando-objetos-com-proxy/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.