JavaScript-proxyk

Ebben az oktatóanyagban példák segítségével megismerheti a JavaScript-proxykat.

A JavaScript-ben a proxy-kat (proxy objektum) használják egy objektum beburkolására, és különböző műveletek újradefiniálására az objektumban, például olvasás, beillesztés, érvényesítés stb. A proxy lehetővé teszi az egyéni viselkedés hozzáadását egy objektumhoz vagy egy funkcióhoz.

Proxyobjektum létrehozása

A proxy szintaxisa:

 new Proxy(target, handler);

Itt,

  • new Proxy() - a kivitelező.
  • target - az az objektum / függvény, amelyet meg akarsz proxyozni
  • handler - újradefiniálhatja az objektum egyéni viselkedését

Például,

 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

Itt a get()metódust az objektum tulajdonságértékének elérésére használják. És ha a tulajdonság nem érhető el az objektumban, akkor visszaadja, hogy a tulajdonság nem létezik.

Mint látható, egy proxy segítségével új műveleteket hozhat létre az objektum számára. Előfordulhat olyan eset, amikor ellenőrizni kívánja, hogy egy objektum rendelkezik-e egy adott kulccsal, és az adott kulcs alapján végrehajtani egy műveletet. Ilyen esetekben proxyk használhatók.

Elhaladhat egy üres kezelő mellett is. Üres kezelő átadásakor a proxy eredeti objektumként viselkedik. Például,

 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 kezelők

A Proxy két kezelő módszert get()és set().

get () kezelő

A get()módszer a célobjektum tulajdonságainak elérésére szolgál. Például,

 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

Itt a get()metódus az objektumot és a tulajdonságot veszi paraméterül.

set () kezelő

A set()metódust egy objektum értékének beállítására használják. Például,

 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)

Itt egy új tulajdonság agekerül a hallgatóobjektumhoz.

A Proxy használata

1. Validáláshoz

Az érvényesítéshez használhat proxyt. Ellenőrizheti a kulcs értékét, és az adott érték alapján elvégezhet egy műveletet.

Például,

 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

Itt csak a hallgatóobjektum név tulajdonsága érhető el. Egyébként nem engedélyezett.

2. Egy objektum csak olvasható nézete

Előfordulhat, hogy nem akarja, hogy mások változtassanak az objektumon. Ilyen esetekben használhat proxyt, hogy az objektum csak olvasható legyen. Például,

 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

A fenti programban semmilyen módon nem mutálható az objektum.

Ha valaki bármilyen módon megpróbálja mutálni az objektumot, akkor csak egy írásvédett karakterláncot kap.

3. Mellékhatások

Használhat proxyt egy másik függvény hívására, ha egy feltétel teljesül. Például,

 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

A JavaScript proxyt a JavaScript ES6 verziójából vezették be . Előfordulhat, hogy egyes böngészők nem támogatják teljes mértékben a használatát. További információkért látogasson el a JavaScript proxy oldalára.

érdekes cikkek...