A metaprogramação é um paradigma de programação poderoso que permite que o código manipule dinamicamente seu comportamento em tempo de execução. O JavaScript, com a introdução de Proxies e a API Reflect no ES6, elevou as capacidades de metaprogramação a um novo nível, permitindo que os desenvolvedores interceptem e redefinam operações de objeto principais como acesso a propriedades, atribuição e invocação de funções.
Esta postagem no blog mergulha profundamente nessas funcionalidades avançadas do JavaScript, explicando sua sintaxe, casos de uso e como elas trabalham juntas para capacitar a programação dinâmica.
O que são Proxies?
Um Proxy no JavaScript é um invólucro que permite aos desenvolvedores interceptar e personalizar operações fundamentais realizadas em um objeto. Essas operações incluem obter e definir propriedades, chamadas de funções, exclusões de propriedades e muito mais.
Sintaxe do Proxy
const proxy = new Proxy(target, handler);
alvo: O objeto sendo alvo do proxy.manipulador: Um objeto contendo métodos, conhecidos como armadilhas, que definem comportamentos personalizados para operações interceptadas.
Exemplo: Registro de Acesso à Propriedade
const user = { name: 'Alice', age: 30 };
const proxy = new Proxy(user, {
get(target, property) {
console.log(`Accessing property: ${property}`);
return target[property];
}
});
console.log(proxy.name); // Logs: Accessing property: name → Output: Alice
Principais Armadilhas do Proxy
| Trap Name | Operation Intercepted |
|---|---|
get |
Acesso a uma propriedade (obj.prop ou obj['prop']) |
set |
Atribuição de um valor a uma propriedade (obj.prop = valor) |
deleteProperty |
Removendo uma propriedade (delete obj.prop) |
has |
Verificando a existência da propriedade (prop in obj) |
apply |
Invocação de função (obj()) |
construct |
Criando novas instâncias com new (new obj()) |
Casos de Uso Avançados Com Proxies
1. Validação de Entrada
const user = { age: 25 };
const proxy = new Proxy(user, {
set(target, property, value) {
if (property === 'age' && typeof value !== 'number') {
throw new Error('Age must be a number!');
}
target[property] = value;
return true;
}
});
proxy.age = 30; // Works fine
proxy.age = '30'; // Throws Error: Age must be a number!
Neste exemplo, o trap set garante a validação do tipo antes de permitir atribuições.
2. Sistemas Reativos (Semelhante à Reactividade do Vue.js)
const data = { price: 5, quantity: 2 };
let total = 0;
const proxy = new Proxy(data, {
set(target, property, value) {
target[property] = value;
total = target.price * target.quantity;
console.log(`Total updated: ${total}`);
return true;
}
});
proxy.price = 10; // Logs: Total updated: 20
proxy.quantity = 3; // Logs: Total updated: 30
Este código recalcula dinamicamente valores sempre que propriedades dependentes são atualizadas, imitando o comportamento dos frameworks reativos modernos.
O Que É Reflect?
A API Reflect complementa os Proxies fornecendo métodos que executam comportamentos padrão para operações de objeto, facilitando a integração deles em traps de Proxy.
Métodos Principais do Reflect
| Method | Description |
|---|---|
Reflect.get(target, prop) |
Recupera o valor de uma propriedade. |
Reflect.set(target, prop, val) |
Define o valor de uma propriedade. |
Reflect.has(target, prop) |
Verifica a existência de uma propriedade (prop in obj). |
Reflect.deleteProperty(target, prop) |
Deleta uma propriedade. |
Reflect.apply(func, thisArg, args) |
Chama uma função com um this contexto específico. |
Reflect.construct(target, args) |
Cria uma nova instância de um construtor. |
Exemplo: Utilizando Reflect para Comportamento Padrão
const user = { age: 25 };
const proxy = new Proxy(user, {
set(target, property, value) {
if (property === 'age' && typeof value !== 'number') {
throw new Error('Age must be a number!');
}
return Reflect.set(target, property, value); // Default behavior
}
});
proxy.age = 28; // Sets successfully
console.log(user.age); // Output: 28
Usar Reflect simplifica o código ao manter operações padrão enquanto adiciona lógica personalizada.
Casos de Uso do Mundo Real
- Embrulhos de segurança: Restringir o acesso a propriedades sensíveis.
- Registro e depuração: Acompanhar mudanças em objetos.
- Validação de dados da API: Garantir regras estritas para dados da API.
Conclusão
A metaprogramação com Proxies e Reflect permite aos desenvolvedores controlar e modificar dinamicamente o comportamento da aplicação. Domine essas ferramentas para elevar sua expertise em JavaScript.
Feliz codificação!
Source:
https://dzone.com/articles/metaprogramming-proxies-reflect-javascript