Já quiseram criar objetos que pudessem reagir ao acesso de propriedades, validar dados automaticamente, ou até implementar comportamentos customizados? E se eu dissesse que o JavaScript tem esse superpoder desde o ES6, mas a maioria dos desenvolvedores simplesmente ignora? Hoje, quero compartilhar o JavaScript Proxy - uma das funcionalidades mais poderosas e subutilizadas do JavaScript moderno. Ao final deste artigo, vocês vão entender como interceptar operações de objetos, criar sistemas reativos, e construir soluções de meta-programação que vão fazer seus colegas se perguntarem como vocês viraram bruxos do JavaScript. ## O que é JavaScript Proxy? Pensem no Proxy como um "intermediário" ou "interceptador" que fica entre seu código e um objeto. Toda vez que alguém tenta acessar, modificar, ou realizar qualquer operação nesse objeto, o Proxy pode intervir e customizar o que acontece. É como ter um porteiro de balada que pode decidir se deixa as pessoas entrarem, modificar seu comportamento, ou até redirecioná-las para outro lugar. O objeto em si não sabe que está sendo "proxificado" - o Proxy cuida de tudo de forma transparente. Por que isso importa? Porque te dá capacidades de meta-programação - a habilidade de escrever código que modifica como outro código se comporta em tempo de execução. ## Quando Usar JavaScript Proxy? **Bons casos de uso:** - Validação e transformação de dados - Logging e debug de acesso a propriedades - Criação de sistemas reativos (como o Vue.js faz internamente) - Mock de APIs e testes - Implementação de estruturas de dados customizadas - Construção de ORMs e abstrações de banco de dados - Criação de objetos de configuração com valores padrão **Quando NÃO usar JavaScript Proxy:** - Operações simples de objeto (é overkill) - Código crítico de performance (Proxies têm overhead) - Quando precisarem de suporte ao IE (Proxies não são "polyfillable") - Validação básica que pode ser feita com setters ## Construindo Seu Primeiro Handler de Proxy Vamos construir um exemplo prático: um objeto inteligente que automaticamente valida e registra mudanças de propriedades. ### Passo 1: Interceptação Básica de Propriedades ```javascript // Criar um proxy simples de logging const createLoggingProxy = (target) => { return new Proxy(target, { get(obj, prop) { console.log(`📖 Lendo propriedade: ${prop}`); return obj[prop]; }, set(obj, prop, value) { console.log(`✏️ Definindo ${prop} = ${value}`); obj[prop] = value; return true; } }); }; const user = createLoggingProxy({ name: 'Alice', age: 30 }); console.log(user.name); // 📖 Lendo propriedade: name -> Alice user.age = 31; // ✏️ Definindo age = 31 ``` Este código cria uma camada transparente que registra todo acesso e modificação de propriedades sem mudar como o objeto funciona. ### Passo 2: Adicionando Lógica de Validação ```javascript // Proxy inteligente de validação const createValidatedUser = (initialData = {}) => { return new Proxy(initialData, { set(obj, prop, value) { // Idade deve ser um número positivo if (prop === 'age' && (typeof value !== 'number' || value < 0)) { throw new Error('Idade deve ser um número positivo'); } // Email deve conter @ if (prop === 'email' && !value.includes('@')) { throw new Error('Email deve ser válido'); } obj[prop] = value; return true; } }); }; const user = createValidatedUser(); user.name = 'Bob'; // ✅ Funciona bem user.age = 25; // ✅ Funciona bem user.age = -5; // ❌ Lança erro user.email = 'invalid'; // ❌ Lança erro ``` Agora nosso objeto automaticamente valida dados sempre que propriedades são definidas, sem precisar de chamadas de validação externas. ### Passo 3: Valores Padrão de Propriedades ```javascript // Proxy com valores padrão inteligentes const createConfigProxy = (defaults) => { return new Proxy({}, { get(obj, prop) { // Retorna valor real se existe, senão retorna padrão return prop in obj ? obj[prop] : defaults[prop]; }, set(obj, prop, value) { obj[prop] = value; return true; } }); }; const config = createConfigProxy({ theme: 'light', language: 'pt-br', maxRetries: 3 }); console.log(config.theme); // 'light' (dos padrões) config.theme = 'dark'; console.log(config.theme); // 'dark' (do objeto real) console.log(config.maxRetries); // 3 (dos padrões) ``` Isso cria um objeto de configuração inteligente que automaticamente fornece valores padrão sem poluir o objeto real. ## Um Exemplo Mais Complexo: Sistema de Dados Reativos Vamos construir algo mais realista - um sistema de dados reativos que automaticamente atualiza a UI quando os dados mudam: ```javascript // Sistema reativo usando Proxy class ReactiveSystem { constructor() { this.subscribers = new Map(); } // Inscrever-se em mudanças de propriedades subscribe(property, callback) { if (!this.subscribers.has(property)) { this.subscribers.set(property, new Set()); } this.subscribers.get(property).add(callback); } // Notificar inscritos sobre mudanças notify(property, newValue, oldValue) { if (this.subscribers.has(property)) { this.subscribers.get(property).forEach(callback => { callback(newValue, oldValue, property); }); } } // Criar objeto reativo createReactive(obj) { return new Proxy(obj, { set: (target, property, value) => { const oldValue = target[property]; target[property] = value; // Notificar inscritos após definição bem-sucedida this.notify(property, value, oldValue); return true; } }); } } // Exemplo de uso const reactive = new ReactiveSystem(); // Criar estado reativo const state = reactive.createReactive({ count: 0, message: 'Olá' }); // Inscrever-se em mudanças reactive.subscribe('count', (newVal, oldVal) => { console.log(`Count mudou: ${oldVal} → ${newVal}`); document.getElementById('counter').textContent = newVal; }); reactive.subscribe('message', (newVal) => { document.getElementById('message').textContent = newVal; }); // Mudanças automaticamente disparam atualizações da UI state.count = 5; // Loga: Count mudou: 0 → 5 state.message = 'Oi!'; // Atualiza elemento DOM ``` Isso cria um sistema reativo simples mas poderoso onde atualizações da UI acontecem automaticamente quando os dados mudam. ## Padrão Avançado: Mock de API e Respostas Dinâmicas Vamos construir algo ainda mais sofisticado - um mocker de API dinâmico que pode lidar com qualquer endpoint: ```javascript // Mocker de API dinâmico usando Proxy const createAPIMocker = (baseURL) => { const mockData = new Map(); return new Proxy({}, { get(target, property) { // Se a propriedade já existe, retorna ela if (property in target) { return target[property]; } // Cria um novo handler de endpoint de API return (...args) => { const endpoint = `${baseURL}/${property}`; // Verifica se temos dados mock para este endpoint if (mockData.has(endpoint)) { return Promise.resolve(mockData.get(endpoint)); } // Gera resposta dinâmica baseada no nome do endpoint const mockResponse = { id: Math.floor(Math.random() * 1000), endpoint: property, args: args, timestamp: Date.now() }; return Promise.resolve(mockResponse); }; }, set(target, property, value) { // Permite definir dados mock mockData.set(`${baseURL}/${property}`, value); return true; } }); }; // Uso const api = createAPIMocker('https://api.exemplo.com'); // Definir dados mock api.users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]; // Estes métodos são criados dinamicamente api.users().then(data => console.log(data)); // Retorna dados mock api.posts().then(data => console.log(data)); // Retorna dados gerados api.comments('post-123').then(data => console.log(data)); // Retorna dados gerados ``` Isso cria um mocker de API flexível que pode lidar com qualquer endpoint dinamicamente sem pré-definir métodos. ## JavaScript Proxy com TypeScript Para usuários de TypeScript, aqui está como tornar suas implementações de Proxy type-safe: ```typescript // types.ts interface User { name: string; email: string; age: number; } interface ValidatedProxy { new(target: T): T; } // Proxy de validação type-safe const createValidatedProxy = >( validators: Partial boolean>> ): ValidatedProxy => { return class extends Proxy { constructor(target: T) { super(target, { set(obj: T, prop: keyof T, value: any): boolean { const validator = validators[prop]; if (validator && !validator(value)) { throw new Error(`Valor inválido para propriedade ${String(prop)}`); } (obj as any)[prop] = value; return true; } }); } } as ValidatedProxy; }; // Uso com TypeScript const UserProxy = createValidatedProxy({ age: (value) => typeof value === 'number' && value >= 0, email: (value) => typeof value === 'string' && value.includes('@') }); const user = new UserProxy({ name: 'Alice', email: 'alice@example.com', age: 30 }); // TypeScript conhece essas propriedades e seus tipos user.name = 'Bob'; // ✅ Type-safe user.age = 25; // ✅ Validado em runtime // user.invalidProp = 'test'; // ❌ Erro do TypeScript ``` ## Padrões Avançados e Melhores Práticas ### 1. Indexação Negativa em Arrays ```javascript // Habilita indexação negativa estilo Python para arrays const createSmartArray = (arr) => { return new Proxy(arr, { get(target, property) { if (typeof property === 'string' && /^-\d+$/.test(property)) { const index = parseInt(property); return target[target.length + index]; } return target[property]; } }); }; const arr = createSmartArray([1, 2, 3, 4, 5]); console.log(arr[-1]); // 5 (último elemento) console.log(arr[-2]); // 4 (penúltimo) ``` ### 2. Acesso por Path de Propriedades ```javascript // Habilita acesso por notação de ponto para objetos aninhados const createPathProxy = (obj) => { return new Proxy(obj, { get(target, property) { if (typeof property === 'string' && property.includes('.')) { return property.split('.').reduce((current, key) => current && current[key], target); } return target[property]; } }); }; const data = createPathProxy({ user: { profile: { name: 'Alice' } } }); console.log(data['user.profile.name']); // 'Alice' ``` ### 3. Interceptação de Chamadas de Método ```javascript // Intercepta e modifica chamadas de método const createTimedProxy = (obj) => { return new Proxy(obj, { get(target, property) { const value = target[property]; if (typeof value === 'function') { return function(...args) { const start = performance.now(); const result = value.apply(this, args); const end = performance.now(); console.log(`Método ${property} levou ${end - start}ms`); return result; }; } return value; } }); }; const calculator = createTimedProxy({ add: (a, b) => a + b, multiply: (a, b) => a * b }); calculator.add(5, 3); // Loga tempo de execução calculator.multiply(4, 7); // Loga tempo de execução ``` ### 4. Proxy de Objeto Imutável ```javascript // Cria objetos profundamente imutáveis const createImmutableProxy = (obj) => { return new Proxy(obj, { set() { throw new Error('Não é possível modificar objeto imutável'); }, deleteProperty() { throw new Error('Não é possível deletar de objeto imutável'); }, get(target, property) { const value = target[property]; // Recursivamente torna objetos aninhados imutáveis if (value && typeof value === 'object') { return createImmutableProxy(value); } return value; } }); }; const immutableUser = createImmutableProxy({ name: 'Alice', settings: { theme: 'dark' } }); // immutableUser.name = 'Bob'; // ❌ Lança erro // immutableUser.settings.theme = 'light'; // ❌ Lança erro console.log(immutableUser.settings.theme); // ✅ Leitura funciona bem ``` ## Armadilhas Comuns a Evitar ### 1. Esquecer de Retornar `true` em Set Traps ```javascript // ❌ Não façam isso const badProxy = new Proxy({}, { set(obj, prop, value) { obj[prop] = value; // Faltando return true! } }); // ✅ Façam isso const goodProxy = new Proxy({}, { set(obj, prop, value) { obj[prop] = value; return true; // Sempre retornem true para sets bem-sucedidos } }); ``` ### 2. Impacto na Performance em Caminhos Críticos ```javascript // ❌ Exemplo problemático - Usando Proxy em loops críticos de performance const proxyArray = new Proxy([], { get: (target, prop) => { console.log(`Acessando ${prop}`); // Operação custosa return target[prop]; } }); for (let i = 0; i < 1000000; i++) { proxyArray.push(i); // Isso vai ser muito lento! } // ✅ Solução - Usar objetos regulares para caminhos críticos const regularArray = []; for (let i = 0; i < 1000000; i++) { regularArray.push(i); // Muito mais rápido } // Aplicar proxy apenas quando necessário const smartArray = new Proxy(regularArray, { /* handlers */ }); ``` ### 3. Violações de Invariantes de Proxy ```javascript // ❌ Evitem este padrão - violando invariantes de proxy const badProxy = new Proxy({}, { get(target, prop) { if (prop === 'length') { return 'não é um número'; // Viola invariantes de Array } return target[prop]; } }); // ✅ Abordagem preferida - respeitar invariantes de objeto const goodProxy = new Proxy({}, { get(target, prop) { const value = target[prop]; // Manter comportamento esperado para propriedades built-in if (prop === 'length' && Array.isArray(target)) { return typeof value === 'number' ? value : 0; } return value; } }); ``` ## Quando NÃO Usar JavaScript Proxy Não usem Proxy quando: - Precisarem de performance máxima (Proxies adicionam overhead) - Estiverem trabalhando com navegadores legados (IE não suporta Proxies) - Validação simples pode ser feita com setters - Estiverem construindo bibliotecas que precisam de ampla compatibilidade ```javascript // ❌ Overkill para cenários simples const expensiveValidation = new Proxy({}, { set(obj, prop, value) { if (prop === 'age' && value < 0) throw new Error('Idade inválida'); obj[prop] = value; return true; } }); // ✅ Solução simples é melhor class User { set age(value) { if (value < 0) throw new Error('Idade inválida'); this._age = value; } get age() { return this._age; } } ``` ## JavaScript Proxy vs Soluções Alternativas **JavaScript Proxy é ótimo para:** - Meta-programação e comportamento dinâmico - Interceptação transparente de operações - Construção de sistemas reativos - Criação de DSLs e comportamentos customizados de objeto **Considerem alternativas quando precisarem de:** - Validação simples de propriedades → Usem `Object.defineProperty()` ou setters - Operações críticas de performance → Usem objetos regulares com validação manual - Suporte a navegadores legados → Usem padrões getter/setter ou bibliotecas de validação - Gerenciamento de estado complexo → Considerem Redux, MobX, ou Zustand ## Concluindo JavaScript Proxy é uma ferramenta poderosa de meta-programação que pode transformar como vocês pensam sobre objetos e seu comportamento. Ele traz interceptação transparente, comportamento dinâmico, e capacidades reativas para suas aplicações JavaScript. **Principais aprendizados:** - Proxies interceptam operações de objeto de forma transparente - Perfeitos para validação, logging, e sistemas reativos - Habilitam padrões poderosos de meta-programação - Vêm com overhead de performance - usem com sabedoria - Não disponíveis em navegadores legados Da próxima vez que se encontrarem escrevendo código repetitivo de validação, construindo ferramentas de debug, ou criando sistemas reativos, lembrem-se do JavaScript Proxy. Seu eu futuro (e seus colegas de equipe) vão agradecer pelas soluções elegantes e maintíveis. Já usaram JavaScript Proxy em seus projetos? Que padrões criativos descobriram? Compartilhem suas experiências nos comentários! --- *Se isso ajudou vocês a subir de nível suas habilidades de meta-programação em JavaScript, sigam para mais padrões JavaScript avançados e melhores práticas! 🚀* ## Recursos - [JavaScript Proxy - Documentação MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Proxy) - [Referência de Handlers de Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy) - [Considerações de Performance de ES6 Proxy](https://thecodebarbarian.com/thoughts-on-es6-proxies-performance)

Loading...

NAVEGAÇÃO

COMPANY

PROJETO

JavaScript Proxy: O Superpoder Que Vai Transformar Como Você Pensa Sobre Objetos