In deze zelfstudie leert u aan de hand van voorbeelden over JavaScript-proxy's.
In JavaScript worden proxy's (proxy-object) gebruikt om een object in te pakken en verschillende bewerkingen in het object te herdefiniëren, zoals lezen, invoegen, valideren, enz. Met proxy kunt u aangepast gedrag aan een object of een functie toevoegen.
Een proxy-object maken
De syntaxis van proxy is:
new Proxy(target, handler);
Hier,
new Proxy()- de constructeur.target- het object / de functie die u wilt proxyhandler- kan het aangepaste gedrag van het object opnieuw definiëren
Bijvoorbeeld,
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
Hier wordt de get()methode gebruikt om toegang te krijgen tot de eigenschapswaarde van het object. En als de eigenschap niet beschikbaar is in het object, retourneert deze eigenschap bestaat niet.
Zoals u kunt zien, kunt u een proxy gebruiken om nieuwe bewerkingen voor het object te maken. Er kan zich een geval voordoen wanneer u wilt controleren of een object een bepaalde sleutel heeft en een actie wilt uitvoeren op basis van die sleutel. In dergelijke gevallen kunnen proxy's worden gebruikt.
U kunt ook een lege handler passeren. Wanneer een lege handler wordt doorgegeven, gedraagt de proxy zich als een origineel object. Bijvoorbeeld,
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-handlers
Proxy biedt twee handler-methoden get()en set().
get () handler
De get()methode wordt gebruikt om toegang te krijgen tot de eigenschappen van een doelobject. Bijvoorbeeld,
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
Hier neemt de get()methode het object en de eigenschap als parameters.
set () handler
De set()methode wordt gebruikt om de waarde van een object in te stellen. Bijvoorbeeld,
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)
Hier wordt een nieuwe eigenschap agetoegevoegd aan het studentenobject.
Gebruik van proxy
1. Voor validatie
U kunt een proxy gebruiken voor validatie. U kunt de waarde van een sleutel controleren en een actie uitvoeren op basis van die waarde.
Bijvoorbeeld,
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
Hier is alleen de eigenschap name van het studentobject toegankelijk. Anders keert het terug Niet toegestaan.
2. Alleen-lezen weergave van een object
Het kan voorkomen dat u niet wilt dat anderen wijzigingen in een object aanbrengen. In dergelijke gevallen kunt u een proxy gebruiken om een object alleen leesbaar te maken. Bijvoorbeeld,
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
In het bovenstaande programma kan men het object op geen enkele manier muteren.
Als iemand het object op enigerlei wijze probeert te muteren, ontvangt u alleen een string met de tekst Alleen lezen.
3. Bijwerkingen
U kunt een proxy gebruiken om een andere functie aan te roepen wanneer aan een voorwaarde is voldaan. Bijvoorbeeld,
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 is geïntroduceerd vanaf de versie van JavaScript ES6 . Sommige browsers ondersteunen het gebruik ervan mogelijk niet volledig. Bezoek JavaScript-proxy voor meer informatie.
