Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju. Čitaj više.

JavaScript proxy objekt omogućuje vam presretanje i prilagođavanje ponašanja drugog objekta, bez mijenjanja izvornika.

Korištenjem proxy objekata možete potvrditi valjanost podataka, osigurati dodatnu funkcionalnost i kontrolirati pristup svojstvima i funkcijama.

Saznajte sve o upotrebi proxy objekata i kako ih možete stvoriti u JavaScriptu.

Stvaranje proxy objekta

U JavaScriptu možete stvoriti proxy objekte pomoću Proxykonstruktor. Ovaj konstruktor uzima dva argumenta: a cilj objekt za omotavanje proxyja i a rukovatelj objekt čija svojstva definiraju ponašanje proxyja kada izvršavate operacije.

Uzima ove argumente i stvara objekt koji možete koristiti umjesto ciljanog objekta. Ovaj stvoreni objekt može redefinirati osnovne operacije kao što su dobivanje, postavljanje i definiranje svojstava. Također možete koristiti ove proxy objekte za evidentiranje pristupa svojstvima i provjeru valjanosti, formatiranja ili dezinfekcije ulaza.

instagram viewer

Na primjer:

konst originalni objekt = {
foo: "bar"
}

konst rukovatelj = {
dobiti: funkcija(cilj, svojstvo){
povratak cilj [svojstvo];
},
postaviti: funkcija(cilj, svojstvo, vrijednost){
cilj [svojstvo] = vrijednost;
}
};

konst proxy = noviProxy(izvorni objekt, rukovatelj)

Ovaj kod stvara ciljni objekt, originalObject, s jednim svojstvom, fuji objekt rukovatelja, rukovatelj. Objekt rukovatelja sadrži dva svojstva, dobiti i postaviti. Ta su svojstva poznata kao zamke.

Zamka proxy objekta je funkcija koja se poziva kad god izvršite određenu radnju na proxy objektu. Zamke vam omogućuju presretanje i prilagođavanje ponašanja proxy objekta. Pristup svojstvu iz proxy objekta poziva dobiti trap, a mijenjanje ili manipuliranje svojstvom iz proxy objekta poziva postaviti zamka.

Na kraju, kod stvara proxy objekt s Proxy konstruktor. Prolazi originalObject i rukovatelj kao ciljni objekt odnosno rukovatelj.

Korištenje proxy objekata

Proxy objekti imaju nekoliko namjena u JavaScriptu, od kojih su neke sljedeće.

Dodavanje funkcionalnosti objektu

Možete koristiti proxy objekt za omotavanje postojećeg objekta i dodavanje novih funkcija, kao što je bilježenje ili obrada grešaka, bez mijenjanja izvornog objekta.

Da biste dodali novu funkciju, morat ćete upotrijebiti Proxy konstruktor i definirajte jednu ili više zamki za akcije koje želite presresti.

Na primjer:

konst korisnički objekt = {
ime: "Kennedy",
prezime: "Martinci",
dob: 20,
};

konst rukovatelj = {
dobiti: funkcija(cilj, svojstvo){
konzola.log("Dobijanje imovine"${property}"`);
povratak cilj [svojstvo];
},
postaviti: funkcija(cilj, svojstvo, vrijednost){
konzola.log(`Postavljanje svojstva "${property}" cijeniti "${value}"`);
cilj [svojstvo] = vrijednost;
},
};

konst proxy = noviProxy(korisnički objekt, rukovatelj);

konzola.log (proxy.firstName); // Dobivanje svojstva "firstName" Kennedy
konzola.log (proxy.prezime); // Dobivanje svojstva "prezime" Martins
proxy.age = 23; // Postavljanje svojstva "dob" cijeniti "23"

Ovaj blok koda dodaje funkcionalnost putem proxy zamki, dobiti i postaviti. Sada, kada pokušate pristupiti ili izmijeniti svojstvo userObject, proxy objekt će prvo zabilježiti vašu operaciju na konzoli prije nego što pristupi ili modificira svojstvo.

Provjera valjanosti podataka prije postavljanja na objekt

Možete koristiti proxy objekte za provjeru valjanosti podataka i osiguravanje da zadovoljavaju određene kriterije prije nego što ih postavite na objekt. To možete učiniti definiranjem logike provjere valjanosti u a postaviti zamka u rukovatelj objekt.

Na primjer:

konst korisnički objekt = {
ime: "Kennedy",
prezime: "Martinci",
dob: 20,
};

konst rukovatelj = {
dobiti: funkcija(cilj, svojstvo){
konzola.log("Dobijanje imovine"${property}"`);
povratak cilj [svojstvo];
},
postaviti: funkcija(cilj, svojstvo, vrijednost){
ako (
vlasništvo "dob" &&
vrsta vrijednost == "broj" &&
vrijednost > 0 &&
vrijednost < 120
) {
konzola.log(`Postavljanje svojstva "${property}" cijeniti "${value}"`);
cilj [svojstvo] = vrijednost;
} drugo {
bacanjenoviGreška("Nevažeći parametar. Pregledajte i ispravite.");
}
},
};

konst proxy = noviProxy(korisnički objekt, rukovatelj);
proxy.age = 21;

Ovaj blok koda dodaje pravila provjere valjanosti u postaviti zamka. Možete dodijeliti bilo koju vrijednost dob vlasništvo na a userObject primjer. No, s dodanim pravilima provjere valjanosti, možete samo dodijeliti novu vrijednost svojstvu starosti ako je to broj veći od 0 i manji od 120. Bilo koja vrijednost koju pokušate postaviti na dob svojstvo koje ne zadovoljava tražene kriterije pokrenut će pogrešku i ispisati poruku o pogrešci.

Upravljanje pristupom svojstvima objekta

Možete koristiti proxy objekte da sakrijete određena svojstva objekta. Učinite to definiranjem logike ograničenja u dobiti zamke za svojstva kojima želite kontrolirati pristup.

Na primjer:

konst korisnički objekt = {
ime: "Kennedy",
prezime: "Martinci",
dob: 20,
telefon: 1234567890,
email: "[email protected]",
};

konst rukovatelj = {
dobiti: funkcija(cilj, svojstvo){
ako (vlasništvo "telefon" || vlasništvo "e-pošta") {
bacanjenoviGreška("Pristup informacijama odbijen");
} drugo {
konzola.log("Dobijanje imovine"${property}"`);
povratak cilj [svojstvo];
}
},
postaviti: funkcija(cilj, svojstvo, vrijednost){
konzola.log(`Postavljanje svojstva "${property}" cijeniti "${value}"`);
cilj [svojstvo] = vrijednost;
},
};

konst proxy = noviProxy(korisnički objekt, rukovatelj);

konzola.log (proxy.firstName); // Dobivanje svojstva "firstName" Kennedy
konzola.log (proxy.email); // Izbacuje pogrešku

Gornji blok koda dodaje određena ograničenja na dobiti zamka. U početku možete pristupiti svim dostupnim svojstvima na userObject. Dodana pravila sprječavaju pristup osjetljivim informacijama kao što su korisnikova e-pošta ili telefon. Pokušaj pristupa bilo kojem od ovih svojstava pokrenut će pogrešku.

Druge proxy zamke

The dobiti i postaviti zamke su najčešće i korisne, ali postoji još 11 drugih JavaScript proxy zamki. Oni su:

  • primijeniti: The primijeniti trap se pokreće kada pozovete funkciju na proxy objektu.
  • konstruirati: The konstruirati trap se pokreće kada koristite new operator za stvaranje objekta iz proxy objekta.
  • deleteProperty: The deleteProperty zamka radi kada koristite izbrisati operator za uklanjanje svojstva iz proxy objekta.
  • ima - The ima zamka radi kada koristite u operator za provjeru postoji li svojstvo na proxy objektu.
  • vlastitiKljučevi - The vlastitiKljučevi zamka se pokreće kada pozovete ili the Object.getOwnPropertyNames ili Object.getOwnPropertySymbols funkciju na proxy objektu.
  • getOwnPropertyDescriptor - The getOwnPropertyDescriptor zamka radi kada pozovete Object.getOwnPropertyDescriptor funkciju na proxy objektu.
  • definiraj svojstvo - The definiraj svojstvo zamka radi kada pozovete Object.defineProperty funkciju na proxy objektu.
  • spriječiti proširenja - The spriječiti proširenja zamka radi kada pozovete Object.preventExtensions funkciju na proxy objektu.
  • isExtensible - The isExtensible zamka radi kada pozovete Object.isExtensible funkciju na proxy objektu.
  • getPrototypeOf - The getPrototypeOf zamka radi kada pozovete Object.getPrototypeOf funkciju na proxy objektu.
  • setPrototypeOf - The setPrototypeOf zamka radi kada pozovete Object.setPrototypeOf funkciju na proxy objektu.

Poput postaviti i dobiti zamke, možete koristiti ove zamke za dodavanje novih slojeva funkcionalnosti, provjere valjanosti i kontrole vašem objektu bez mijenjanja izvornika.

Loše strane proxy objekata

Proxy objekti mogu biti moćan alat za dodavanje prilagođene funkcije ili provjere valjanosti objektu. Ali imaju i neke potencijalne nedostatke. Jedan takav nedostatak je poteškoće s otklanjanjem pogrešaka jer može biti teško vidjeti što se događa iza kulisa.

Proxy objekti također mogu biti teški za korištenje, osobito ako niste upoznati s njima. Trebali biste pažljivo razmotriti ove nedostatke prije korištenja proxy objekata u svom kodu.