I denne veiledningen vil du lære om JavaScript-proxyer ved hjelp av eksempler.
I JavaScript brukes proxyer (proxy-objekt) til å pakke inn et objekt og omdefinere forskjellige operasjoner i objektet, slik som lesing, innsetting, validering, etc. Proxy lar deg legge til tilpasset oppførsel til et objekt eller en funksjon.
Opprette et proxy-objekt
Syntaksen til proxy er:
new Proxy(target, handler);
Her,
new Proxy()- konstruktøren.target- objektet / funksjonen som du vil proxyhandler- kan omdefinere objektets egendefinerte oppførsel
For eksempel,
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
Her brukes get()metoden for å få tilgang til objektets eiendomsverdi. Og hvis eiendommen ikke er tilgjengelig i objektet, returnerer den at egenskapen ikke eksisterer.
Som du kan se, kan du bruke en proxy for å opprette nye operasjoner for objektet. Det kan oppstå en sak når du vil sjekke om et objekt har en bestemt nøkkel og utføre en handling basert på denne nøkkelen. I slike tilfeller kan fullmakter brukes.
Du kan også passere en tom handler. Når en tom håndterer sendes, oppfører proxyen seg som et originalt objekt. For eksempel,
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
Fullmaktsbehandlere
Proxy gir to behandlingsmetoder get()og set().
få () handler
Den get()metoden brukes for å få tilgang til egenskaper til et målobjekt. For eksempel,
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
Her get()tar metoden objektet og egenskapen som parametere.
set () handler
Den set()metoden er brukt for å angi verdien av et objekt. For eksempel,
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)
Her er en ny eiendom agelagt til studentobjektet.
Bruk av proxy
1. For validering
Du kan bruke en proxy for validering. Du kan sjekke verdien på en nøkkel og utføre en handling basert på den verdien.
For eksempel,
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
Her er bare navnegenskapen til studentobjektet tilgjengelig. Ellers returnerer den Ikke tillatt.
2. Skrivebeskyttet visning av et objekt
Det kan være tider når du ikke vil la andre gjøre endringer i et objekt. I slike tilfeller kan du bruke en proxy for å gjøre et objekt bare lesbart. For eksempel,
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
I programmet ovenfor kan man ikke mutere objektet på noen måte.
Hvis man prøver å mutere objektet på noen måte, vil du bare motta en streng som sier skrivebeskyttet.
3. Bivirkninger
Du kan bruke en proxy for å ringe til en annen funksjon når en betingelse er oppfylt. For eksempel,
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 ble introdusert fra versjonen av JavaScript ES6 . Noen nettlesere støtter kanskje ikke bruken av den. For å lære mer, besøk JavaScript proxy.
