Um objeto proxy JavaScript permite interceptar e personalizar o comportamento de outro objeto, sem modificar o original.
Usando objetos proxy, você pode validar dados, fornecer funcionalidade extra e controlar o acesso a propriedades e funções.
Descubra tudo sobre os usos de objetos proxy e como você pode criá-los em JavaScript.
Criando um Objeto Proxy
Em JavaScript, você pode criar objetos proxy usando o Proxyconstrutor. Este construtor recebe dois argumentos: um alvo objeto para envolver o proxy e um manipulador objeto cujas propriedades definem o comportamento do proxy ao realizar operações.
Ele pega esses argumentos e cria um objeto que você pode usar no lugar do objeto de destino. Esse objeto criado pode redefinir as principais operações, como obtenção, configuração e definição de propriedades. Você também pode usar esses objetos de proxy para registrar acessos de propriedade e validar, formatar ou limpar entradas.
Por exemplo:
const Objetooriginal = {
foo: "bar"
}const manipulador = {
pegar: função(alvo, propriedade){
retornar destino[propriedade];
},
definir: função(alvo, propriedade, valor){
alvo[propriedade] = valor;
}
};
const proxy = novoProxy(originalObject, manipulador)
Este código cria um objeto de destino, objeto original, com uma única propriedade, foo, e um objeto manipulador, manipulador. O objeto manipulador contém duas propriedades, pegar e definir. Essas propriedades são conhecidas como armadilhas.
Uma interceptação de objeto proxy é uma função chamada sempre que você executa uma ação especificada em um objeto proxy. Traps permitem que você intercepte e personalize o comportamento do objeto proxy. Acessar uma propriedade do objeto proxy chama o método pegar trap e modificar ou manipular uma propriedade do objeto proxy chama o definir armadilha.
Finalmente, o código cria um objeto proxy com o Proxy construtor. passa objeto original e manipulador como o objeto de destino e o manipulador, respectivamente.
Usando Objetos Proxy
Os objetos proxy têm vários usos em JavaScript, alguns dos quais são os seguintes.
Adicionando funcionalidade a um objeto
Você pode usar um objeto proxy para encapsular um objeto existente e adicionar novas funcionalidades, como registro ou Manipulação de erros, sem modificar o objeto original.
Para adicionar novas funcionalidades, você precisará usar o Proxy constructor e defina uma ou mais armadilhas para as ações que deseja interceptar.
Por exemplo:
const userObject = {
primeiro nome: "Kennedy",
sobrenome: "Martins",
idade: 20,
};const manipulador = {
pegar: função(alvo, propriedade){
console.registro(`Obtendo propriedade "${propriedade}"`);
retornar destino[propriedade];
},
definir: função(alvo, propriedade, valor){
console.registro(`Configurando a propriedade "${propriedade}" dar valor "${valor}"`);
alvo[propriedade] = valor;
},
};const proxy = novoProxy(userObject, manipulador);
console.log (proxy.firstName); // Obtendo a propriedade "firstName" Kennedy
console.log (proxy.lastName); // Obtendo a propriedade "lastName" Martins
proxy.idade = 23; // Configurando a propriedade "idade" dar valor "23"
Este bloco de código adiciona funcionalidade por meio de armadilhas de proxy, pegar e definir. Agora, quando você tenta acessar ou modificar uma propriedade do objeto de usuário, o objeto proxy primeiro registrará sua operação no console antes de acessar ou modificar a propriedade.
Validando dados antes de configurá-los em um objeto
Você pode usar objetos proxy para validar dados e garantir que eles atendam a determinados critérios antes de defini-los em um objeto. Você pode fazer isso definindo a lógica de validação em um definir armadilha no manipulador objeto.
Por exemplo:
const userObject = {
primeiro nome: "Kennedy",
sobrenome: "Martins",
idade: 20,
};const manipulador = {
pegar: função(alvo, propriedade){
console.registro(`Obtendo propriedade "${propriedade}"`);
retornar destino[propriedade];
},
definir: função(alvo, propriedade, valor){
se (
propriedade "idade" &&
tipo de valor == "número" &&
valor > 0 &&
valor < 120
) {
console.registro(`Configurando a propriedade "${propriedade}" dar valor "${valor}"`);
alvo[propriedade] = valor;
} outro {
lançarnovoErro("Parâmetro inválido. Revise e corrija.");
}
},
};
const proxy = novoProxy(userObject, manipulador);
proxy.idade = 21;
Este bloco de código adiciona regras de validação ao definir armadilha. Você pode atribuir qualquer valor ao idade propriedade em um objeto de usuário instância. Mas, com as regras de validação adicionadas, você só pode atribuir um novo valor à propriedade age se for um número maior que 0 e menor que 120. Qualquer valor que você tentar definir no idade propriedade que não atende aos critérios necessários acionará um erro e imprimirá uma mensagem de erro.
Controlando o acesso às propriedades do objeto
Você pode usar objetos proxy para ocultar certas propriedades de um objeto. Faça isso definindo a lógica de restrição em pegar armadilhas para as propriedades às quais você deseja controlar o acesso.
Por exemplo:
const userObject = {
primeiro nome: "Kennedy",
sobrenome: "Martins",
idade: 20,
telefone: 1234567890,
e-mail: "[email protected]",
};const manipulador = {
pegar: função(alvo, propriedade){
se (propriedade "telefone" || propriedade "e-mail") {
lançarnovoErro("Acesso à informação negado");
} outro {
console.registro(`Obtendo propriedade "${propriedade}"`);
retornar destino[propriedade];
}
},
definir: função(alvo, propriedade, valor){
console.registro(`Configurando a propriedade "${propriedade}" dar valor "${valor}"`);
alvo[propriedade] = valor;
},
};const proxy = novoProxy(userObject, manipulador);
console.log (proxy.firstName); // Obtendo a propriedade "firstName" Kennedy
console.log (proxy.email); // Lança erro
O bloco de código acima adiciona certas restrições ao pegar armadilha. Inicialmente, você pode acessar todas as propriedades disponíveis em objeto de usuário. As regras adicionadas impedem o acesso a informações confidenciais, como e-mail ou telefone do usuário. Tentar acessar qualquer uma dessas propriedades acionará um erro.
Outras armadilhas de proxy
O pegar e definir as armadilhas são as mais comuns e úteis, mas existem outras 11 armadilhas de proxy JavaScript. Eles são:
- aplicar: O aplicar trap é executado quando você chama uma função no objeto proxy.
- construir: O construir trap é executado quando você usa o operador new para criar um objeto a partir do objeto proxy.
- deleteProperty: O deleteProperty armadilha é executada quando você usa o excluir operador para remover uma propriedade do objeto proxy.
- tem - O tem armadilha é executada quando você usa o em operador para verificar se existe uma propriedade no objeto proxy.
- OwnKeys - O OwnKeys trap é executado quando você chama o método Object.getOwnPropertyNames ou Object.getOwnPropertySymbols função no objeto proxy.
- getOwnPropertyDescriptor - O getOwnPropertyDescriptor trap é executado quando você chama o Object.getOwnPropertyDescriptor função no objeto proxy.
- definirPropriedade - O definirPropriedade trap é executado quando você chama o Object.defineProperty função no objeto proxy.
- prevenirExtensões - O prevenirExtensões trap é executado quando você chama o Object.preventExtensions função no objeto proxy.
- é extensível - O é extensível trap é executado quando você chama o Object.isExtensible função no objeto proxy.
- getPrototypeOf - O getPrototypeOf trap é executado quando você chama o Object.getPrototypeOf função no objeto proxy.
- setPrototypeOf - O setPrototypeOf trap é executado quando você chama o Object.setPrototypeOf função no objeto proxy.
Como o definir e pegar armadilhas, você pode usar essas armadilhas para adicionar novas camadas de funcionalidade, validação e controle ao seu objeto sem modificar o original.
Os contras dos objetos proxy
Os objetos proxy podem ser uma ferramenta poderosa para adicionar funcionalidade personalizada ou validação a um objeto. Mas eles também têm algumas desvantagens potenciais. Uma dessas desvantagens é a dificuldade de depuração, pois pode ser difícil ver o que está acontecendo nos bastidores.
Objetos proxy também podem ser difíceis de usar, especialmente se você não estiver familiarizado com eles. Você deve considerar cuidadosamente essas desvantagens antes de usar objetos proxy em seu código.
