Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon. Les mer.

Et JavaScript-proxy-objekt lar deg fange opp og tilpasse oppførselen til et annet objekt, uten å endre originalen.

Ved å bruke proxy-objekter kan du validere data, gi ekstra funksjonalitet og kontrollere tilgang til egenskaper og funksjoner.

Finn ut alt om bruken av proxy-objekter og hvordan du kan lage dem i JavaScript.

Opprette et proxy-objekt

I JavaScript kan du opprette proxy-objekter ved å bruke Fullmaktkonstruktør. Denne konstruktøren tar to argumenter: a mål gjenstand for å vikle proxyen rundt og en handler objekt hvis egenskaper definerer proxyens oppførsel når du utfører operasjoner.

Den tar disse argumentene og lager et objekt du kan bruke i stedet for målobjektet. Dette opprettede objektet kan omdefinere kjerneoperasjoner som å hente, angi og definere egenskaper. Du kan også bruke disse proxy-objektene til å logge eiendomstilganger og validere, formatere eller rense innganger.

instagram viewer

For eksempel:

konst originalObject = {
foo: "bar"
}

konst handler = {
få: funksjon(mål, eiendom){
komme tilbake mål[eiendom];
},
sett: funksjon(mål, eiendom, verdi){
mål[egenskap] = verdi;
}
};

konst proxy = nyFullmakt(originalObject, handler)

Denne koden lager et målobjekt, originalobjekt, med en enkelt eiendom, foo, og et behandlerobjekt, handler. Behandlerobjektet inneholder to egenskaper, og sett. Disse egenskapene er kjent som feller.

En proxy-objektfelle er en funksjon som kalles hver gang du utfører en spesifisert handling på et proxy-objekt. Feller lar deg avskjære og tilpasse oppførselen til proxy-objektet. Å få tilgang til en egenskap fra proxy-objektet kaller trap, og modifisering eller manipulering av en egenskap fra proxy-objektet kaller den sett felle.

Til slutt lager koden et proxy-objekt med Fullmakt konstruktør. Det går over originalobjekt og handler som henholdsvis målobjekt og behandler.

Bruke proxy-objekter

Proxy-objekter har flere bruksområder i JavaScript, hvorav noen er som følger.

Legge til funksjonalitet til et objekt

Du kan bruke et proxy-objekt til å pakke inn et eksisterende objekt og legge til ny funksjonalitet, for eksempel logging eller feilhåndtering, uten å endre det opprinnelige objektet.

For å legge til ny funksjonalitet, må du bruke Fullmakt konstruktør og definer en eller flere feller for handlingene du vil fange opp.

For eksempel:

konst brukerobjekt = {
fornavn: "Kennedy",
etternavn: "Martins",
alder: 20,
};

konst handler = {
få: funksjon(mål, eiendom){
konsoll.Logg("Få eiendom"${property}"`);
komme tilbake mål[eiendom];
},
sett: funksjon(mål, eiendom, verdi){
konsoll.Logg("Innstilling av egenskap"${property}" å verdsette "${value}"`);
mål[egenskap] = verdi;
},
};

konst proxy = nyFullmakt(brukerobjekt, behandler);

konsoll.log (proxy.firstName); // Får eiendommen "fornavn" Kennedy
konsoll.log (proxy.etterName); // Får egenskapen "etternavn" Martins
proxy.age = 23; // Innstilling av egenskap "alder" å verdsette "23"

Denne kodeblokken legger til funksjonalitet via proxy-fellene, og sett. Nå, når du prøver å få tilgang til eller endre en egenskap til brukerobjekt, vil proxy-objektet først logge operasjonen din til konsollen før du får tilgang til eller endrer egenskapen.

Validere data før du setter dem på et objekt

Du kan bruke proxy-objekter til å validere data og sikre at de oppfyller visse kriterier før du setter dem på et objekt. Du kan gjøre det ved å definere valideringslogikken i en sett felle i handler gjenstand.

For eksempel:

konst brukerobjekt = {
fornavn: "Kennedy",
etternavn: "Martins",
alder: 20,
};

konst handler = {
få: funksjon(mål, eiendom){
konsoll.Logg("Få eiendom"${property}"`);
komme tilbake mål[eiendom];
},
sett: funksjon(mål, eiendom, verdi){
hvis (
eiendom "alder" &&
type verdi == "Antall" &&
verdi > 0 &&
verdi <120
) {
konsoll.Logg("Innstilling av egenskap"${property}" å verdsette "${value}"`);
mål[egenskap] = verdi;
} ellers {
kastenyFeil("Ugyldig parameter. Vennligst se gjennom og korriger.");
}
},
};

konst proxy = nyFullmakt(brukerobjekt, behandler);
proxy.age = 21;

Denne kodeblokken legger til valideringsregler til sett felle. Du kan tilordne hvilken som helst verdi til alder eiendom på en brukerobjekt forekomst. Men med de ekstra valideringsreglene kan du bare tilordne en ny verdi til aldersegenskapen hvis den er et tall, større enn 0 og mindre enn 120. Enhver verdi du prøver å sette på alder egenskap som ikke oppfyller de nødvendige kriteriene vil utløse en feil og skrive ut en feilmelding.

Kontrollere tilgang til objektegenskaper

Du kan bruke proxy-objekter til å skjule visse egenskaper ved et objekt. Gjør det ved å definere restriksjonslogikk i feller for eiendommene du ønsker å kontrollere tilgangen til.

For eksempel:

konst brukerobjekt = {
fornavn: "Kennedy",
etternavn: "Martins",
alder: 20,
telefon: 1234567890,
e-post: "[email protected]",
};

konst handler = {
få: funksjon(mål, eiendom){
hvis (eiendom "telefon" || eiendom "e-post") {
kastenyFeil(«Tilgang til informasjon nektet»);
} ellers {
konsoll.Logg("Få eiendom"${property}"`);
komme tilbake mål[eiendom];
}
},
sett: funksjon(mål, eiendom, verdi){
konsoll.Logg("Innstilling av egenskap"${property}" å verdsette "${value}"`);
mål[egenskap] = verdi;
},
};

konst proxy = nyFullmakt(brukerobjekt, behandler);

konsoll.log (proxy.firstName); // Får eiendommen "fornavn" Kennedy
konsoll.log (proxy.email); // Kaster feil

Kodeblokken ovenfor legger visse begrensninger til felle. I første omgang kan du få tilgang til alle tilgjengelige eiendommer på brukerobjekt. De tilførte reglene forhindrer tilgang til sensitiv informasjon som brukerens e-post eller telefon. Å prøve å få tilgang til en av disse egenskapene vil utløse en feil.

Andre proxy-feller

De og sett feller er de vanligste og mest nyttige, men det er 11 andre JavaScript-proxy-feller. De er:

  • søke om: Den søke om trap kjører når du kaller en funksjon på proxy-objektet.
  • konstruere: Den konstruere trap kjører når du bruker den nye operatoren til å opprette et objekt fra proxy-objektet.
  • sletteProperty: Den sletteProperty fellen går når du bruker slette operatør for å fjerne en egenskap fra proxy-objektet.
  • har - Den har fellen går når du bruker i operatør for å sjekke om det finnes en egenskap på proxy-objektet.
  • egne nøkler - Den egne nøkler fellen går når du kaller enten Object.getOwnPropertyNames eller Object.getOwnPropertySymbols funksjon på proxy-objektet.
  • getOwnPropertyDescriptor - Den getOwnPropertyDescriptor fellen går når du ringer Object.getOwnPropertyDescriptor funksjon på proxy-objektet.
  • defineProperty - Den defineProperty fellen går når du ringer Object.defineProperty funksjon på proxy-objektet.
  • forhindre utvidelser - Den forhindre utvidelser fellen går når du ringer Object.preventExtensions funksjon på proxy-objektet.
  • er utvidbar - Den er utvidbar fellen går når du ringer Object.isExtensible funksjon på proxy-objektet.
  • getPrototypeOf - Den getPrototypeOf fellen går når du ringer Object.getPrototypeOf funksjon på proxy-objektet.
  • settPrototypeOf - Den settPrototypeOf fellen går når du ringer Object.setPrototypeOf funksjon på proxy-objektet.

Som sett og traps, kan du bruke disse fellene til å legge til nye lag med funksjonalitet, validering og kontroll til objektet ditt uten å endre originalen.

Ulempene med proxy-objekter

Proxy-objekter kan være et kraftig verktøy for å legge til tilpasset funksjonalitet eller validering til et objekt. Men de har også noen potensielle ulemper. En slik ulempe er problemer med feilsøking, da det kan være vanskelig å se hva som skjer bak kulissene.

Proxy-objekter kan også være vanskelige å bruke, spesielt hvis du ikke er kjent med dem. Du bør nøye vurdere disse ulempene før du bruker proxy-objekter i koden.