Criando um Proxy
Envolva objetos para interceptar operações.
Criando um Proxy é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.
O que é um proxy
Um proxy envolve um objeto e permite interceptar operações fundamentais, como ler, escrever e excluir propriedades.
Você cria um com new Proxy(target, handler), em que o manipulador define interceptadores que personalizam o comportamento.
Um manipulador vazio
Com um manipulador vazio, o proxy se comporta exatamente como o target. Todas as operações passam diretamente para ele.
const target = { greeting: 'hello' };
const proxy = new Proxy(target, {});
console.log(proxy.greeting);
proxy.greeting = 'hi';
console.log(target.greeting);Target e proxy compartilham o state
O proxy não copia o target. Eles fazem referência ao mesmo objeto subjacente, portanto uma alteração feita por qualquer um dos dois fica visível em ambos.
const target = { count: 0 };
const proxy = new Proxy(target, {});
proxy.count = 5;
console.log(target.count);
target.count = 10;
console.log(proxy.count);Adicionando um interceptador get
O interceptador get intercepta leituras de propriedades. Aqui, cada leitura é registrada (logged) antes de retornar o valor.
const proxy = new Proxy({ name: 'Ada' }, {
get(target, prop) {
console.log('reading ' + prop);
return target[prop];
}
});
console.log(proxy.name);Parâmetros do interceptador
O interceptador get recebe o target, o nome da property e o receiver (o proxy). Você decide o que retornar.
const proxy = new Proxy({ a: 1 }, {
get(target, prop) {
return prop in target ? target[prop] : 'missing';
}
});
console.log(proxy.a);
console.log(proxy.b);Propriedades calculadas durante a leitura
Um interceptador get pode retornar valores que o target não armazena de fato, calculando-os sob demanda.
const proxy = new Proxy({ first: 'Ada', last: 'Lovelace' }, {
get(target, prop) {
if (prop === 'full') return target.first + ' ' + target.last;
return target[prop];
}
});
console.log(proxy.full);Adicionando um interceptador set
O interceptador set intercepta escritas. É necessário retornar true para indicar sucesso; caso contrário, a atribuição será tratada como uma falha.
const proxy = new Proxy({}, {
set(target, prop, value) {
console.log('setting ' + prop + ' = ' + value);
target[prop] = value;
return true;
}
});
proxy.score = 42;
console.log(proxy.score);O interceptador has
O interceptador has intercepta o operador in, permitindo personalizar as verificações de pertencimento.
const proxy = new Proxy({ a: 1 }, {
has(target, prop) {
console.log('checking ' + prop);
return prop in target;
}
});
console.log('a' in proxy);
console.log('b' in proxy);O interceptador deleteProperty
O interceptador deleteProperty intercepta delete. Retorne true em caso de sucesso.
const proxy = new Proxy({ secret: 'x', ok: 'y' }, {
deleteProperty(target, prop) {
console.log('deleting ' + prop);
delete target[prop];
return true;
}
});
delete proxy.secret;
console.log(Object.keys(proxy));Vários interceptadores disponíveis
Além de get e set, os proxies oferecem interceptadores para has, deleteProperty, ownKeys, apply (para funções), construct e muito mais. Você implementa apenas os que precisar.
const proxy = new Proxy({ x: 1, y: 2 }, {
ownKeys(target) {
console.log('listing keys');
return Object.keys(target);
}
});
console.log(Object.keys(proxy));Por que os proxies são importantes
Os proxies permitem adicionar validação, registro, valores padrão e reatividade sem alterar o objeto target. Eles são a base de sistemas de reatividade de estruturas como o Vue. Em seguida, você analisará mais profundamente os interceptadores get e set.
const logged = new Proxy({ v: 0 }, {
get: (t, p) => { console.log('get ' + p); return t[p]; },
set: (t, p, val) => { console.log('set ' + p); t[p] = val; return true; }
});
logged.v = 9;
console.log(logged.v);Verificação rápida
O que new Proxy(target, handler) cria?
Recapitulação: criando um proxy
Você aprendeu a interceptar operações de objetos:
new Proxy(target, handler)envolve um objeto com interceptadores.- Um manipulador vazio deixa tudo passar; o proxy e o target compartilham o state.
- Interceptadores comuns:
get,set,has,deleteProperty,ownKeys. - Os interceptadores set e delete devem retornar
trueem caso de sucesso.
Perguntas Frequentes
A aula “Criando um Proxy” é grátis?
Sim — o texto completo de “Criando um Proxy” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.
O que vou aprender em “Criando um Proxy”?
Envolva objetos para interceptar operações. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar JavaScript Academy?
Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Criando um Proxy”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de JavaScript Academy?
Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Criando um Proxy
- Armadilhas get e set
- A API Reflect
- Casos de uso práticos de Proxy