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, levou as capacidades de metaprogramação a um novo nível, permitindo que os desenvolvedores interceptem e redefinam operações principais de objetos como acesso a propriedades, atribuição e invocação de funções.
Esta postagem no blog mergulha fundo nesses recursos avançados do JavaScript, explicando sua sintaxe, casos de uso e como funcionam juntos para capacitar a programação dinâmica.
O que são Proxies?
Um Proxy no JavaScript é um invólucro que permite que os desenvolvedores interceptem e personalizem 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 que está sendo alvo do proxy.manipulador: Um objeto contendo métodos, conhecidos como armadilhas, que definem comportamentos personalizados para operações interceptadas.
Exemplo: Registrando o 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 |
Acessando uma propriedade (obj.prop ou obj['prop']) |
set |
Atribuindo um valor a uma propriedade (obj.prop = valor) |
deleteProperty |
Excluindo 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, a armadilha set garante a validação do tipo antes de permitir atribuições.
2. Sistemas Reativos (Similar à 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 os valores sempre que as 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 armadilhas de Proxy.
Métodos Chave do Reflect
| Method | Description |
|---|---|
Reflect.get(target, prop) |
Recupera o valor de uma propriedade. |
Reflect.set(target, prop, val) |
Define um valor de propriedade. |
Reflect.has(target, prop) |
Verifica a existência da propriedade (prop in obj). |
Reflect.deleteProperty(target, prop) |
Exclui uma propriedade. |
Reflect.apply(func, thisArg, args) |
Chama uma função com um this especificado contexto. |
Reflect.construct(alvo, args) |
Cria uma nova instância de um construtor. |
Exemplo: Usando 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
O uso do Reflect simplifica o código ao manter operações padrão enquanto adiciona lógica personalizada.
Casos de Uso do Mundo Real
- Invólucros 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 aprimorar sua expertise em JavaScript.
Boa codificação!
Source:
https://dzone.com/articles/metaprogramming-proxies-reflect-javascript