I denne vejledning lærer du om JavaScript-proxyer ved hjælp af eksempler.
I JavaScript bruges proxies (proxy-objekt) til at pakke et objekt og omdefinere forskellige operationer til objektet, såsom læsning, indsættelse, validering osv. Proxy giver dig mulighed for at tilføje brugerdefineret adfærd til et objekt eller en funktion.
Oprettelse af et proxyobjekt
Syntaksen for proxy er:
new Proxy(target, handler);
Her,
new Proxy()- konstruktøren.target- objektet / funktionen, som du vil proxyhandler- kan omdefinere objektets brugerdefinerede opfø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 get()bruges metoden til at få adgang til objektets ejendomsværdi. Og hvis ejendommen ikke er tilgængelig i objektet, returnerer den ejendom eksisterer ikke.
Som du kan se, kan du bruge en proxy til at oprette nye operationer til objektet. Der kan opstå en sag, når du vil kontrollere, om et objekt har en bestemt nøgle og udføre en handling baseret på denne nøgle. I sådanne tilfælde kan fuldmagter bruges.
Du kan også passere en tom handler. Når en tom handler sendes, opfører proxyen sig 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
Proxyhåndterere
Proxy indeholder to behandlingsmetoder get()og set().
få () handler
Den get()metode benyttes til at få adgang til egenskaberne af 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()tager metoden objektet og ejendommen som parametre.
sæt () handler
Den set()metode, der anvendes til at indstille værdien af 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 agetilføjes en ny egenskab til elevobjektet.
Anvendelse af proxy
1. Til validering
Du kan bruge en proxy til validering. Du kan kontrollere værdien af en nøgle og udføre en handling baseret på denne værdi.
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 kun navnegenskaben for elevobjektet tilgængelig. Ellers vender det tilbage Ikke tilladt.
2. Skrivebeskyttet visning af et objekt
Der kan være tidspunkter, hvor du ikke vil lade andre foretage ændringer i et objekt. I sådanne tilfælde kan du bruge en proxy til kun at gøre et objekt læsbart. 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 ovenstående program kan man ikke mutere objektet på nogen måde.
Hvis man forsøger at mutere objektet på nogen måde, modtager du kun en streng, der siger skrivebeskyttet.
3. Bivirkninger
Du kan bruge en proxy til at ringe til en anden funktion, når en betingelse er opfyldt. 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 blev introduceret fra versionen af JavaScript ES6 . Nogle browsere understøtter muligvis ikke brugen fuldt ud. Hvis du vil vide mere, skal du besøge JavaScript-proxy.
