Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

Et JavaScript-proxyobjekt giver dig mulighed for at opsnappe og tilpasse adfærden for et andet objekt uden at ændre originalen.

Ved hjælp af proxy-objekter kan du validere data, levere ekstra funktionalitet og kontrollere adgang til egenskaber og funktioner.

Find ud af alt om brugen af ​​proxy-objekter, og hvordan du kan oprette dem i JavaScript.

Oprettelse af et proxyobjekt

I JavaScript kan du oprette proxy-objekter ved hjælp af Fuldmagtkonstruktør. Denne konstruktør tager to argumenter: a mål genstand for at vikle proxyen rundt og en handler objekt, hvis egenskaber definerer proxyens adfærd, når du udfører handlinger.

Det tager disse argumenter og opretter et objekt, du kan bruge i stedet for målobjektet. Dette oprettede objekt kan omdefinere kerneoperationer såsom at hente, indstille og definere egenskaber. Du kan også bruge disse proxy-objekter til at logge ejendomsadgange og validere, formatere eller rense input.

instagram viewer

For eksempel:

konst originalObject = {
foo: "bar"
}

konst handler = {
få: fungere(mål, ejendom){
Vend tilbage mål[ejendom];
},
sæt: fungere(mål, ejendom, værdi){
mål[egenskab] = værdi;
}
};

konst proxy = nyFuldmagt(originalObject, handler)

Denne kode opretter et målobjekt, originalobjekt, med en enkelt ejendom, fooog et handlerobjekt, handler. Håndterobjektet indeholder to egenskaber, og sæt. Disse egenskaber er kendt som fælder.

En proxyobjektfælde er en funktion, der kaldes, hver gang du udfører en specificeret handling på et proxyobjekt. Traps giver dig mulighed for at opsnappe og tilpasse adfærden for proxyobjektet. Adgang til en egenskab fra proxy-objektet kalder trap, og ændring eller manipulation af en egenskab fra proxy-objektet kalder den sæt fælde.

Til sidst opretter koden et proxyobjekt med Fuldmagt konstruktør. Det går over originalobjekt og handler som henholdsvis målobjekt og handler.

Brug af proxyobjekter

Proxy-objekter har flere anvendelser i JavaScript, hvoraf nogle er som følger.

Tilføjelse af funktionalitet til et objekt

Du kan bruge et proxy-objekt til at ombryde et eksisterende objekt og tilføje ny funktionalitet, såsom logning eller fejlhåndteringuden at ændre det originale objekt.

For at tilføje ny funktionalitet skal du bruge Fuldmagt konstruktør og definere en eller flere fælder for de handlinger, du vil opsnappe.

For eksempel:

konst brugerObject = {
fornavn: "Kennedy",
efternavn: "Martins",
alder: 20,
};

konst handler = {
få: fungere(mål, ejendom){
konsol.log("Få ejendom"${property}"`);
Vend tilbage mål[ejendom];
},
sæt: fungere(mål, ejendom, værdi){
konsol.log("Indstilling af egenskab"${property}" At værdsætte "${value}"`);
mål[egenskab] = værdi;
},
};

konst proxy = nyFuldmagt(brugerobjekt, handler);

konsol.log (proxy.fornavn); // Får ejendom "fornavn" Kennedy
konsol.log (proxy.efternavn); // Får egenskaben "efternavn" Martins
proxy.alder = 23; // Indstilling af egenskab "alder" At værdsætte "23"

Denne kodeblok tilføjer funktionalitet via proxy-fælderne, og sæt. Nu, når du prøver at få adgang til eller ændre en egenskab for brugerObjekt, vil proxy-objektet først logge din handling til konsollen, før du får adgang til eller ændrer egenskaben.

Validering af data, før du sætter dem på et objekt

Du kan bruge proxy-objekter til at validere data og sikre, at de opfylder visse kriterier, før du sætter dem på et objekt. Det kan du gøre ved at definere valideringslogikken i en sæt fælde i handler objekt.

For eksempel:

konst brugerObject = {
fornavn: "Kennedy",
efternavn: "Martins",
alder: 20,
};

konst handler = {
få: fungere(mål, ejendom){
konsol.log("Få ejendom"${property}"`);
Vend tilbage mål[ejendom];
},
sæt: fungere(mål, ejendom, værdi){
hvis (
ejendom "alder" &&
type værdi == "nummer" &&
værdi > 0 &&
værdi < 120
) {
konsol.log("Indstilling af egenskab"${property}" At værdsætte "${value}"`);
mål[egenskab] = værdi;
} andet {
kastenyFejl("Ugyldig parameter. Gennemgå venligst og ret.");
}
},
};

konst proxy = nyFuldmagt(brugerobjekt, handler);
proxy.alder = 21;

Denne kodeblok tilføjer valideringsregler til sæt fælde. Du kan tildele enhver værdi til alder ejendom på en brugerObjekt eksempel. Men med de tilføjede valideringsregler kan du kun tildele en ny værdi til aldersegenskaben, hvis det er et tal, større end 0 og mindre end 120. Enhver værdi, du forsøger at indstille på alder egenskab, der ikke opfylder de påkrævede kriterier, vil udløse en fejl og udskrive en fejlmeddelelse.

Styring af adgang til objektegenskaber

Du kan bruge proxy-objekter til at skjule bestemte egenskaber for et objekt. Gør det ved at definere restriktionslogik i fælder for de egenskaber, du vil kontrollere adgangen til.

For eksempel:

konst brugerObject = {
fornavn: "Kennedy",
efternavn: "Martins",
alder: 20,
telefon: 1234567890,
e-mail: "[email protected]",
};

konst handler = {
få: fungere(mål, ejendom){
hvis (ejendom "telefon" || ejendom "e-mail") {
kastenyFejl("Adgang til oplysninger nægtet");
} andet {
konsol.log("Få ejendom"${property}"`);
Vend tilbage mål[ejendom];
}
},
sæt: fungere(mål, ejendom, værdi){
konsol.log("Indstilling af egenskab"${property}" At værdsætte "${value}"`);
mål[egenskab] = værdi;
},
};

konst proxy = nyFuldmagt(brugerobjekt, handler);

konsol.log (proxy.fornavn); // Får ejendom "fornavn" Kennedy
konsol.log (proxy.e-mail); // Kaster fejl

Kodeblokken ovenfor tilføjer visse begrænsninger til fælde. I første omgang kan du få adgang til alle tilgængelige ejendomme på brugerObjekt. De tilføjede regler forhindrer adgang til følsomme oplysninger såsom brugerens e-mail eller telefon. Forsøg på at få adgang til en af ​​disse egenskaber vil udløse en fejl.

Andre proxy-fælder

Det og sæt fælder er de mest almindelige og nyttige, men der er 11 andre JavaScript-proxy-fælder. De er:

  • ansøge: Det ansøge trap kører, når du kalder en funktion på proxy-objektet.
  • konstruere: Det konstruere trap kører, når du bruger den nye operator til at oprette et objekt fra proxy-objektet.
  • sletEjendom: Det sletEjendom fælden løber, når du bruger slette operatør for at fjerne en egenskab fra proxy-objektet.
  • har - Det har fælden løber, når du bruger i operatør for at kontrollere, om der findes en egenskab på proxyobjektet.
  • egne nøgler - Det egne nøgler fælden løber, når du kalder enten Object.getOwnPropertyNames eller Object.getOwnPropertySymbols funktion på proxyobjektet.
  • getOwnPropertyDescriptor - Det getOwnPropertyDescriptor fælden løber, når du kalder Object.getOwnPropertyDescriptor funktion på proxyobjektet.
  • definereEjendom - Det definereEjendom fælden løber, når du kalder Object.defineProperty funktion på proxyobjektet.
  • forhindre udvidelser - Det forhindre udvidelser fælden løber, når du kalder Object.preventExtensions funktion på proxyobjektet.
  • er udvidelig - Det er udvidelig fælden løber, når du kalder Objekt.erUdvidelig funktion på proxyobjektet.
  • getPrototypeOf - Det getPrototypeOf fælden løber, når du kalder Object.getPrototypeOf funktion på proxyobjektet.
  • sætPrototypeOf - Det sætPrototypeOf fælden løber, når du kalder Object.setPrototypeOf funktion på proxyobjektet.

Ligesom sæt og traps, kan du bruge disse traps can til at tilføje nye lag af funktionalitet, validering og kontrol til dit objekt uden at ændre originalen.

Ulemper ved proxyobjekter

Proxy-objekter kan være et effektivt værktøj til at tilføje brugerdefineret funktionalitet eller validering til et objekt. Men de har også nogle potentielle ulemper. En sådan ulempe er problemer med fejlfinding, da det kan være svært at se, hvad der sker bag kulisserne.

Proxy-objekter kan også være svære at bruge, især hvis du ikke er bekendt med dem. Du bør nøje overveje disse ulemper, før du bruger proxy-objekter i din kode.