JavaScript-ombud

I denna handledning lär du dig om JavaScript-proxyserier med hjälp av exempel.

I JavaScript används proxyservrar (proxy-objekt) för att radera ett objekt och omdefiniera olika operationer i objektet, till exempel läsning, insättning, validering, etc. Proxy låter dig lägga till anpassat beteende till ett objekt eller en funktion.

Skapa ett proxyobjekt

Syntaxen för proxy är:

 new Proxy(target, handler);

Här,

  • new Proxy() - konstruktören.
  • target - objektet / funktionen som du vill proxy
  • handler - kan omdefiniera objektets anpassade beteende

Till exempel,

 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

Här används get()metoden för att komma åt objektets egendomsvärde. Och om egenskapen inte är tillgänglig i objektet returnerar den att egenskapen inte finns.

Som du kan se kan du använda en proxy för att skapa nya operationer för objektet. Ett fall kan uppstå när du vill kontrollera om ett objekt har en viss nyckel och utföra en åtgärd baserat på den nyckeln. I sådana fall kan ombud användas.

Du kan också skicka en tom hanterare. När en tom hanterare skickas fungerar proxyen som ett originalobjekt. Till exempel,

 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

Proxyhanterare

Proxy tillhandahåller två hanteringsmetoder get()och set().

få () hanterare

Den get()metod som används för att komma åt egenskaperna för ett målobjekt. Till exempel,

 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

Här get()tar metoden objektet och egenskapen som parametrar.

set () -hanteraren

Den set()metod som används för att ställa in värdet av ett objekt. Till exempel,

 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)

Här ageläggs en ny egenskap till studentobjektet.

Användning av proxy

1. För validering

Du kan använda en proxy för validering. Du kan kontrollera värdet på en nyckel och utföra en åtgärd baserat på det värdet.

Till exempel,

 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

Här är endast namnegenskapen för studentobjektet tillgänglig. Annars returnerar det Ej tillåtet.

2. Skrivskyddad vy av ett objekt

Det kan finnas tillfällen när du inte vill låta andra göra ändringar i ett objekt. I sådana fall kan du använda en proxy för att endast göra ett objekt läsbart. Till exempel,

 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 ovan kan man inte mutera objektet på något sätt.

Om man försöker mutera objektet på något sätt får du bara en sträng som säger Read Only.

3. Biverkningar

Du kan använda en proxy för att ringa en annan funktion när ett villkor är uppfyllt. Till exempel,

 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 introducerades från versionen av JavaScript ES6 . Vissa webbläsare kanske inte stöder dess användning helt. För mer information, besök JavaScript proxy.

Intressanta artiklar...