U ovom ćete tutorijalu uz primjere naučiti o JavaScript proxyjima.
U JavaScript-u se proxyji (proxy objekt) koriste za umotavanje objekta i redefiniranje različitih operacija u objekt kao što su čitanje, umetanje, provjera valjanosti itd. Proxy omogućuje dodavanje prilagođenog ponašanja objektu ili funkciji.
Izrada proxy objekta
Sintaksa proxyja je:
new Proxy(target, handler);
Ovdje,
new Proxy()- konstruktor.target- objekt / funkciju koju želite proksihandler- može redefinirati prilagođeno ponašanje objekta
Na primjer,
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
Ovdje se get()metoda koristi za pristup vrijednosti svojstva objekta. A ako svojstvo nije dostupno u objektu, vraća svojstvo ne postoji.
Kao što vidite, možete koristiti proxy za stvaranje novih operacija za objekt. Slučaj se može pojaviti kada želite provjeriti ima li objekt određeni ključ i izvršiti radnju na temelju tog ključa. U takvim se slučajevima mogu koristiti opunomoćenici.
Također možete proslijediti prazan rukovatelj. Kad se proslijedi prazan rukovatelj, proxy se ponaša kao izvorni objekt. Na primjer,
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
Proxy rukovatelji
Proxy nudi dvije metode rukovatelja get()i set().
get () rukovatelj
get()Metoda se koristi za pristup svojstva ciljnog objekta. Na primjer,
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
Ovdje get()metoda uzima objekt i svojstvo kao svoje parametre.
set () rukovatelj
set()Metoda se koristi za podešavanje vrijednosti objekta. Na primjer,
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)
Ovdje agese studentu dodaje novo svojstvo .
Upotreba proxyja
1. Za provjeru valjanosti
Za provjeru valjanosti možete koristiti proxy. Možete provjeriti vrijednost ključa i izvršiti radnju na temelju te vrijednosti.
Na primjer,
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
Ovdje je dostupno samo svojstvo imena studentskog objekta. Inače, vraća se Nije dopušteno.
2. Pogled objekta samo za čitanje
Mogu biti trenuci kada ne želite dopustiti drugima da mijenjaju objekt. U takvim slučajevima možete koristiti proxy kako biste objekt učinili samo čitljivim. Na primjer,
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
U gornjem programu ne može se na bilo koji način mutirati objekt.
Ako netko pokuša mutirati objekt na bilo koji način, primit ćete samo niz koji govori samo za čitanje.
3. Nuspojave
Proxy možete koristiti za pozivanje druge funkcije kada je uvjet zadovoljen. Na primjer,
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 predstavljen je iz verzije JavaScript ES6 . Neki preglednici možda neće u potpunosti podržavati njegovu upotrebu. Da biste saznali više, posjetite JavaScript proxy.
