Neste tutorial, você aprenderá sobre proxies JavaScript com a ajuda de exemplos.
Em JavaScript, os proxies (objeto proxy) são usados para envolver um objeto e redefinir várias operações no objeto, como leitura, inserção, validação, etc. O proxy permite que você adicione um comportamento personalizado a um objeto ou função.
Criação de um objeto proxy
A sintaxe do proxy é:
new Proxy(target, handler);
Aqui,
new Proxy()- o construtor.target- o objeto / função que você deseja proxyhandler- pode redefinir o comportamento personalizado do objeto
Por exemplo,
let student1 = ( age: 24, name: "Felix" ) const handler = ( get: function(obj, prop) ( return obj(prop) ? obj(prop) : 'property does not exist'; ) ) const proxy = new Proxy(student1, handler); console.log(proxy.name); // Felix console.log(proxy.age); // 24 console.log(proxy.class); // property does not exist
Aqui, o get()método é usado para acessar o valor da propriedade do objeto. E se a propriedade não estiver disponível no objeto, ele retorna propriedade não existe.
Como você pode ver, você pode usar um proxy para criar novas operações para o objeto. Pode surgir um caso em que você deseja verificar se um objeto possui uma chave específica e executar uma ação com base nessa chave. Nesses casos, os proxies podem ser usados.
Você também pode passar um manipulador vazio. Quando um manipulador vazio é passado, o proxy se comporta como um objeto original. Por exemplo,
let student = ( name: 'Jack', age: 24 ) const handler = ( ); // passing empty handler const proxy1 = new Proxy(student, ()); console.log(proxy1); // Proxy (name: "Jack", age: 24) console.log(proxy1.name); // Jack
Manipuladores de proxy
O proxy fornece dois métodos de tratamento get()e set().
get () handler
O get()método é usado para acessar as propriedades de um objeto de destino. Por exemplo,
let student = ( name: 'Jack', age: 24 ) const handler = ( // get the object key and value get(obj, prop) ( return obj(prop); ) ) const proxy = new Proxy(student, handler); console.log(proxy.name); // Jack
Aqui, o get()método leva o objeto e a propriedade como seus parâmetros.
manipulador set ()
O set()método é usado para definir o valor de um objeto. Por exemplo,
let student = ( name: 'John' ) let setNewValue = ( set: function(obj, prop, value) ( obj(prop) = value; return; ) ); // setting new proxy let person = new Proxy(student, setNewValue); // setting new key/value person.age = 25; console.log(person); // Proxy (name: "John", age: 25)
Aqui, uma nova propriedade ageé adicionada ao objeto de aluno.
Usos de proxy
1. Para validação
Você pode usar um proxy para validação. Você pode verificar o valor de uma chave e executar uma ação com base nesse valor.
Por exemplo,
let student = ( name: 'Jack', age: 24 ) const handler = ( // get the object key and value get(obj, prop) ( // check condition if (prop == 'name') ( return obj(prop); ) else ( return 'Not allowed'; ) ) ) const proxy = new Proxy(student, handler); console.log(proxy.name); // Jack console.log(proxy.age); // Not allowed
Aqui, apenas a propriedade name do objeto aluno está acessível. Caso contrário, ele retorna Não permitido.
2. Visualização somente leitura de um objeto
Pode haver momentos em que você não deseja permitir que outras pessoas façam alterações em um objeto. Nesses casos, você pode usar um proxy para tornar um objeto apenas legível. Por exemplo,
let student = ( name: 'Jack', age: 23 ) const handler = ( set: function (obj, prop, value) ( if (obj(prop)) ( // cannot change the student value console.log('Read only') ) ) ); const proxy = new Proxy(student, handler); proxy.name = 'John'; // Read only proxy.age = 33; // Read only
No programa acima, não se pode alterar o objeto de nenhuma forma.
Se alguém tentar alterar o objeto de alguma forma, você receberá apenas uma string dizendo Somente leitura.
3. Efeitos colaterais
Você pode usar um proxy para chamar outra função quando uma condição for atendida. Por exemplo,
const myFunction = () => ( console.log("execute this function") ); const handler = ( set: function (target, prop, value) ( if (prop === 'name' && value === 'Jack') ( // calling another function myFunction(); ) else ( console.log('Can only access name property'); ) ) ); const proxy = new Proxy((), handler); proxy.name = 'Jack'; // execute this function proxy.age = 33; // Can only access name property
O proxy JavaScript foi introduzido a partir da versão do JavaScript ES6 . Alguns navegadores podem não suportar totalmente seu uso. Para saber mais, visite proxy JavaScript.
