Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

A JavaScript-proxyobjektum lehetővé teszi egy másik objektum viselkedésének elfogását és testreszabását az eredeti módosítása nélkül.

A proxy objektumok segítségével ellenőrizheti az adatokat, további funkciókat biztosíthat, valamint szabályozhatja a tulajdonságokhoz és függvényekhez való hozzáférést.

Tudjon meg mindent a proxy objektumok használatáról és arról, hogyan hozhatja létre őket JavaScriptben.

Proxy objektum létrehozása

A JavaScriptben proxy objektumokat hozhat létre a Meghatalmazottkonstruktőr. Ez a konstruktor két argumentumot használ: a cél objektumot a proxy körbetekerésére, és a kezelő objektum, amelynek tulajdonságai meghatározzák a proxy viselkedését a műveletek végrehajtásakor.

Felveszi ezeket az argumentumokat, és létrehoz egy objektumot, amelyet használhat a célobjektum helyett. Ez a létrehozott objektum újradefiniálhatja az alapvető műveleteket, például a tulajdonságok lekérését, beállítását és meghatározását. Ezeket a proxyobjektumokat használhatja a tulajdonság-hozzáférések naplózására, valamint a bemenetek érvényesítésére, formázására vagy megtisztítására.

instagram viewer

Például:

const originalObject = {
foo: "rúd"
}

const kezelő = {
kap: funkció(cél, ingatlan){
Visszatérés cél[tulajdon];
},
készlet: funkció(cél, ingatlan, érték){
cél[tulajdonság] = érték;
}
};

const proxy = újMeghatalmazott(eredeti objektum, kezelő)

Ez a kód létrehoz egy célobjektumot, eredetiObject, egyetlen tulajdonsággal, foo, és egy kezelő objektum, kezelő. A kezelő objektum két tulajdonságot tartalmaz, kap és készlet. Ezeket a tulajdonságokat csapdáknak nevezzük.

A proxy objektum csapda egy olyan függvény, amelyet akkor hívnak meg, amikor egy adott műveletet hajt végre egy proxy objektumon. A csapdák lehetővé teszik a proxy objektum viselkedésének elfogását és testreszabását. Egy tulajdonság elérése a proxy objektumból meghívja a kap trap, és egy tulajdonság módosítása vagy manipulálása a proxy objektumból meghívja a készlet csapda.

Végül a kód létrehoz egy proxy objektumot a Meghatalmazott konstruktőr. Elmúlik eredetiObject és kezelő mint célobjektum és kezelő.

Proxy objektumok használata

A proxyobjektumok többféleképpen használhatók a JavaScriptben, amelyek közül néhány a következő.

Funkcionalitás hozzáadása egy objektumhoz

A proxy objektum segítségével becsomagolhat egy meglévő objektumot, és új funkciókat adhat hozzá, például naplózást vagy hibakezelés, az eredeti objektum módosítása nélkül.

Új funkciók hozzáadásához használnia kell a Meghatalmazott konstruktort, és definiáljon egy vagy több csapdát az elfogni kívánt műveletekhez.

Például:

const userObject = {
keresztnév: "Kennedy",
vezetéknév: "Martinok",
életkor: 20,
};

const kezelő = {
kap: funkció(cél, ingatlan){
konzol.log("Ingatlanszerzés"${property}"`);
Visszatérés cél[tulajdon];
},
készlet: funkció(cél, ingatlan, érték){
konzol.log("Tulajdonság beállítása"${property}" értékel "${value}"`);
cél[tulajdonság] = érték;
},
};

const proxy = újMeghatalmazott(userObject, kezelő);

konzol.log (proxy.firstName); // Kennedy "firstName" tulajdon megszerzése
konzol.log (proxy.lastName); // A "lastName" Martins tulajdon megszerzése
proxy.age = 23; // Tulajdonság beállítása "kor" értékel "23"

Ez a kódblokk funkcionalitást ad a proxy csapdákon keresztül, kap és készlet. Most, amikor megpróbál hozzáférni vagy módosítani egy tulajdonságot a userObject, a proxy objektum először naplózza a műveletet a konzolon, mielőtt hozzáférne vagy módosítaná a tulajdonságot.

Adatok ellenőrzése az objektumon való elhelyezés előtt

Proxy objektumok segítségével ellenőrizheti az adatokat, és bizonyos feltételeknek való megfelelést biztosíthat, mielőtt egy objektumra állítaná azokat. Ezt megteheti az érvényesítési logika meghatározásával a készlet csapda a kezelő tárgy.

Például:

const userObject = {
keresztnév: "Kennedy",
vezetéknév: "Martinok",
életkor: 20,
};

const kezelő = {
kap: funkció(cél, ingatlan){
konzol.log("Ingatlanszerzés"${property}"`);
Visszatérés cél[tulajdon];
},
készlet: funkció(cél, ingatlan, érték){
ha (
ingatlan "kor" &&
típusú érték == "szám" &&
érték > 0 &&
érték < 120
) {
konzol.log("Tulajdonság beállítása"${property}" értékel "${value}"`);
cél[tulajdonság] = érték;
} más {
dobásújHiba("Érvénytelen paraméter. Kérjük, nézze át és javítsa ki.");
}
},
};

const proxy = újMeghatalmazott(userObject, kezelő);
proxy.age = 21;

Ez a kódblokk érvényesítési szabályokat ad hozzá a készlet csapda. Bármilyen értéket hozzárendelhet a kor ingatlan a userObject példa. A hozzáadott érvényesítési szabályokkal azonban csak akkor rendelhet új értéket az életkor tulajdonsághoz, ha az egy szám, amely 0-nál nagyobb és 120-nál kisebb. Bármilyen érték, amit megpróbál beállítani a kor Az a tulajdonság, amely nem felel meg a szükséges feltételeknek, hibát jelez, és hibaüzenetet nyomtat.

Az objektum tulajdonságaihoz való hozzáférés szabályozása

A proxy objektumok segítségével elrejtheti egy objektum bizonyos tulajdonságait. Ezt a korlátozási logika meghatározásával teheti meg kap csapdák azokhoz a tulajdonságokhoz, amelyekhez a hozzáférést szabályozni szeretné.

Például:

const userObject = {
keresztnév: "Kennedy",
vezetéknév: "Martinok",
életkor: 20,
telefon: 1234567890,
email: "[email protected]",
};

const kezelő = {
kap: funkció(cél, ingatlan){
ha (ingatlan "telefon" || ingatlan "email") {
dobásújHiba("Az információhoz való hozzáférés megtagadva");
} más {
konzol.log("Ingatlanszerzés"${property}"`);
Visszatérés cél[tulajdon];
}
},
készlet: funkció(cél, ingatlan, érték){
konzol.log("Tulajdonság beállítása"${property}" értékel "${value}"`);
cél[tulajdonság] = érték;
},
};

const proxy = újMeghatalmazott(userObject, kezelő);

konzol.log (proxy.firstName); // Kennedy "firstName" tulajdon megszerzése
konzol.log (proxy.email); // Hibát dob

A fenti kódblokk bizonyos korlátozásokat ad a kap csapda. Kezdetben hozzáférhet az összes elérhető tulajdonsághoz userObject. A hozzáadott szabályok megakadályozzák az olyan érzékeny információkhoz való hozzáférést, mint a felhasználó e-mailje vagy telefonja. Ha megpróbál hozzáférni ezen tulajdonságok bármelyikéhez, az hibaüzenetet vált ki.

Egyéb proxycsapdák

A kap és készlet A csapdák a leggyakoribbak és a leghasznosabbak, de van 11 másik JavaScript-proxy csapda is. Ők:

  • alkalmaz: A alkalmaz A trap akkor fut, amikor meghív egy függvényt a proxy objektumon.
  • építeni: A építeni A trap akkor fut le, ha az új operátorral objektumot hoz létre a proxy objektumból.
  • deleteProperty: A deleteProperty csapda fut, ha használja a töröl operátort, hogy eltávolítson egy tulajdonságot a proxy objektumból.
  • van - A van csapda fut, ha használja a ban ben operátort, hogy ellenőrizze, létezik-e tulajdonság a proxy objektumon.
  • ownKeys - A ownKeys csapda fut, ha valamelyiket hívja Object.getOwnPropertyNames vagy Object.getOwnPropertySymbols funkciót a proxy objektumon.
  • getOwnPropertyDescriptor - A getOwnPropertyDescriptor csapda fut, amikor hívja a Object.getOwnPropertyDescriptor funkciót a proxy objektumon.
  • defineProperty - A defineProperty csapda fut, amikor hívja a Object.defineProperty funkciót a proxy objektumon.
  • kiterjesztések megelőzésére - A kiterjesztések megelőzésére csapda fut, amikor hívja a Object.preventExtensions funkciót a proxy objektumon.
  • bővíthető - A bővíthető csapda fut, amikor hívja a Object.isExtensible funkciót a proxy objektumon.
  • getPrototypeOf - A getPrototypeOf csapda fut, amikor hívja a Object.getPrototypeOf funkciót a proxy objektumon.
  • setPrototypeOf - A setPrototypeOf csapda fut, amikor hívja a Object.setPrototypeOf funkciót a proxy objektumon.

Mint a készlet és kap csapdák segítségével új funkcionalitási, érvényesítési és vezérlési rétegeket adhat hozzá objektumához anélkül, hogy módosítaná az eredetit.

A proxyobjektumok hátrányai

A proxyobjektumok hatékony eszközt jelenthetnek egyéni funkciók hozzáadásához vagy egy objektum érvényesítéséhez. De van néhány lehetséges hátrányuk is. Az egyik ilyen hátrány a hibakeresés nehézsége, mivel nehéz lehet látni, mi történik a színfalak mögött.

A proxy objektumok használata is nehézkes lehet, különösen, ha nem ismeri őket. Gondosan mérlegelnie kell ezeket a hátrányokat, mielőtt proxy objektumokat használna a kódban.