În acest tutorial, veți afla despre proxy-urile JavaScript cu ajutorul exemplelor.
În JavaScript, proxy-urile (obiect proxy) sunt utilizate pentru a înfășura un obiect și a redefini diverse operații în obiect, cum ar fi citirea, inserarea, validarea etc. Proxy vă permite să adăugați un comportament personalizat unui obiect sau unei funcții.
Crearea unui obiect proxy
Sintaxa proxy-ului este:
new Proxy(target, handler);
Aici,
new Proxy()- constructorul.target- obiectul / funcția pe care doriți să o proxyhandler- poate redefini comportamentul personalizat al obiectului
De exemplu,
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
Aici, get()metoda este utilizată pentru a accesa valoarea proprietății obiectului. Și dacă proprietatea nu este disponibilă în obiect, ea returnează proprietatea nu există.
După cum puteți vedea, puteți utiliza un proxy pentru a crea noi operații pentru obiect. Un caz poate apărea atunci când doriți să verificați dacă un obiect are o anumită cheie și să efectuați o acțiune bazată pe acea cheie. În astfel de cazuri, pot fi utilizate proxy.
De asemenea, puteți trece un handler gol. Când este trecut un handler gol, proxy-ul se comportă ca un obiect original. De exemplu,
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
Manipulatori proxy
Proxy oferă două metode de gestionare get()și set().
get () handler
get()Metoda este utilizată pentru a accesa proprietățile unui obiect țintă. De exemplu,
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
Aici, get()metoda ia ca obiect parametrul obiectul și proprietatea.
set () handler
set()Metoda este utilizată pentru a seta valoarea unui obiect. De exemplu,
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)
Aici, o nouă proprietate ageeste adăugată obiectului student.
Utilizări ale proxy-ului
1. Pentru validare
Puteți utiliza un proxy pentru validare. Puteți verifica valoarea unei chei și puteți efectua o acțiune pe baza valorii respective.
De exemplu,
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
Aici, numai proprietatea de nume a obiectului student este accesibilă. Altfel, revine Nu este permis.
2. Vizualizare numai în citire a unui obiect
Pot exista momente în care nu doriți să lăsați alții să facă modificări într-un obiect. În astfel de cazuri, puteți utiliza un proxy pentru a face un obiect numai lizibil. De exemplu,
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
În programul de mai sus, nu se poate muta obiectul în niciun fel.
Dacă cineva încearcă să mute obiectul în vreun fel, veți primi doar un șir care spune numai citire.
3. Efecte secundare
Puteți utiliza un proxy pentru a apela o altă funcție atunci când este îndeplinită o condiție. De exemplu,
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
JavaScript proxy a fost introdus din versiunea JavaScript ES6 . Este posibil ca unele browsere să nu accepte pe deplin utilizarea acestuia. Pentru a afla mai multe, vizitați proxy JavaScript.
