Proxy JavaScript

V tomto tutoriálu se pomocí příkladů dozvíte o proxy JavaScriptu.

V JavaScriptu se proxy servery (proxy objekt) používají k zabalení objektu a předefinování různých operací do objektu, jako je čtení, vkládání, ověřování atd. Proxy umožňuje přidat vlastní chování k objektu nebo funkci.

Vytvoření objektu proxy

Syntaxe serveru proxy je:

 new Proxy(target, handler);

Tady,

  • new Proxy() - konstruktér.
  • target - objekt / funkce, které chcete proxy
  • handler - může předefinovat vlastní chování objektu

Například,

 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

Zde se get()metoda používá pro přístup k hodnotě vlastnosti objektu. A pokud vlastnost není v objektu k dispozici, vrátí vlastnost neexistuje.

Jak vidíte, můžete použít proxy k vytvoření nových operací s objektem. Může nastat případ, kdy chcete zkontrolovat, zda má objekt konkrétní klíč, a provést akci na základě tohoto klíče. V takových případech lze použít proxy.

Můžete také předat prázdnou obslužnou rutinu. Když je předána prázdná obslužná rutina, proxy se chová jako původní objekt. Například,

 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

Obslužné rutiny proxy

Proxy poskytuje dvě metody obslužné rutiny get()a set().

get () handler

get()Metoda se používá pro přístup k vlastnosti cílového objektu. Například,

 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

Zde get()metoda bere objekt a vlastnost jako své parametry.

obslužný program set ()

set()Metoda se používá k nastavení hodnoty objektu. Například,

 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)

Zde ageje do objektu studenta přidána nová vlastnost .

Použití proxy

1. K ověření

Pro ověření můžete použít proxy. Můžete zkontrolovat hodnotu klíče a na základě této hodnoty provést akci.

Například,

 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

Zde je přístupná pouze vlastnost name objektu studenta. Jinak se vrací Není povoleno.

2. Pohled pouze na objekt

Mohou nastat situace, kdy nechcete, aby ostatní nechali provádět změny v objektu. V takových případech můžete použít proxy, aby byl objekt pouze čitelný. Například,

 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

Ve výše uvedeném programu nelze objekt nijak mutovat.

Pokud se někdo pokusí objekt nějakým způsobem mutovat, obdržíte pouze řetězec s nápisem Pouze ke čtení.

3. Vedlejší účinky

Když je splněna podmínka, můžete použít proxy k volání jiné funkce. Například,

 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 byl představen z verze JavaScriptu ES6 . Některé prohlížeče nemusí jeho použití plně podporovat. Další informace najdete na serveru JavaScript proxy.

Zajímavé články...