In questo tutorial imparerai a conoscere i proxy JavaScript con l'aiuto di esempi.
In JavaScript, i proxy (oggetto proxy) vengono utilizzati per racchiudere un oggetto e ridefinire varie operazioni nell'oggetto come lettura, inserimento, convalida, ecc. Il proxy consente di aggiungere un comportamento personalizzato a un oggetto o una funzione.
Creazione di un oggetto proxy
La sintassi del proxy è:
new Proxy(target, handler);
Qui,
new Proxy()- il costruttore.target- l'oggetto / funzione di cui si desidera eseguire il proxyhandler- può ridefinire il comportamento personalizzato dell'oggetto
Per esempio,
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
Qui, il get()metodo viene utilizzato per accedere al valore della proprietà dell'oggetto. E se la proprietà non è disponibile nell'oggetto, restituisce la proprietà non esiste.
Come puoi vedere, puoi usare un proxy per creare nuove operazioni per l'oggetto. Può sorgere un caso quando si desidera verificare se un oggetto ha una chiave particolare ed eseguire un'azione basata su quella chiave. In tali casi, possono essere utilizzati proxy.
Puoi anche passare un handler vuoto. Quando viene passato un gestore vuoto, il proxy si comporta come un oggetto originale. Per esempio,
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
Gestori proxy
Proxy fornisce due metodi di gestione get()e set().
gestore get ()
Il get()metodo viene utilizzato per accedere alle proprietà di un oggetto di destinazione. Per esempio,
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
In questo caso, il get()metodo accetta l'oggetto e la proprietà come parametri.
set () gestore
Il set()metodo viene utilizzato per impostare il valore di un oggetto. Per esempio,
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)
Qui, una nuova proprietà ageviene aggiunta all'oggetto studente.
Usi del proxy
1. Per la convalida
È possibile utilizzare un proxy per la convalida. Puoi controllare il valore di una chiave ed eseguire un'azione basata su quel valore.
Per esempio,
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
Qui è accessibile solo la proprietà name dell'oggetto student. Altrimenti, restituisce Non consentito.
2. Visualizzazione di sola lettura di un oggetto
A volte potresti non voler consentire ad altri di apportare modifiche a un oggetto. In questi casi, è possibile utilizzare un proxy per rendere solo leggibile un oggetto. Per esempio,
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
Nel programma di cui sopra, non è possibile modificare l'oggetto in alcun modo.
Se si tenta di modificare l'oggetto in qualsiasi modo, riceverai solo una stringa che dice Sola lettura.
3. Effetti collaterali
È possibile utilizzare un proxy per chiamare un'altra funzione quando viene soddisfatta una condizione. Per esempio,
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
Il proxy JavaScript è stato introdotto dalla versione di JavaScript ES6 . Alcuni browser potrebbero non supportarne completamente l'utilizzo. Per saperne di più, visita il proxy JavaScript.
