Met een JavaScript-proxyobject kunt u het gedrag van een ander object onderscheppen en aanpassen, zonder het origineel te wijzigen.
Met behulp van proxy-objecten kunt u gegevens valideren, extra functionaliteit bieden en de toegang tot eigenschappen en functies regelen.
Lees alles over het gebruik van proxy-objecten en hoe u ze in JavaScript kunt maken.
Een proxy-object maken
In JavaScript kunt u proxy-objecten maken met behulp van de Volmachtconstructeur. Deze constructor heeft twee argumenten: a doel object om de proxy rond te wikkelen en a behandelaar object waarvan de eigenschappen het gedrag van de proxy bepalen wanneer u bewerkingen uitvoert.
Het neemt deze argumenten en maakt een object dat u kunt gebruiken in plaats van het doelobject. Dit gemaakte object kan kernbewerkingen herdefiniëren, zoals het ophalen, instellen en definiëren van eigenschappen. U kunt deze proxy-objecten ook gebruiken om eigendomstoegangen vast te leggen en invoer te valideren, op te maken of op te schonen.
Bijvoorbeeld:
const origineelObject = {
foe: "bar"
}const behandelaar = {
krijgen: functie(doel, eigendom){
opbrengst doel[eigenschap];
},
set: functie(doel, eigenschap, waarde){
doel[eigenschap] = waarde;
}
};
const volmacht = nieuwVolmacht(origineel object, handler)
Deze code maakt een doelobject, origineelObject, met een enkel pand, foe, en een handler-object, behandelaar. Het handlerobject bevat twee eigenschappen, krijgen En set. Deze eigenschappen staan bekend als vallen.
Een proxy-object-trap is een functie die wordt aangeroepen wanneer u een opgegeven actie uitvoert op een proxy-object. Met traps kunt u het gedrag van het proxy-object onderscheppen en aanpassen. Toegang krijgen tot een eigenschap vanuit het proxy-object roept de krijgen trap, en het wijzigen of manipuleren van een eigenschap van het proxy-object roept de set val.
Ten slotte maakt de code een proxy-object met de Volmacht constructeur. Het gaat voorbij origineelObject En behandelaar als respectievelijk het doelobject en de handler.
Proxy-objecten gebruiken
Proxy-objecten hebben verschillende toepassingen in JavaScript, waarvan sommige als volgt zijn.
Functionaliteit toevoegen aan een object
U kunt een proxyobject gebruiken om een bestaand object in te pakken en nieuwe functionaliteit toe te voegen, zoals logboekregistratie of foutafhandeling, zonder het oorspronkelijke object te wijzigen.
Om nieuwe functionaliteit toe te voegen, moet u de Volmacht constructor en definieer een of meer vallen voor de acties die u wilt onderscheppen.
Bijvoorbeeld:
const gebruikerObject = {
Voornaam: "Kennedy",
achternaam: "Martins",
leeftijd: 20,
};const behandelaar = {
krijgen: functie(doel, eigendom){
troosten.log(`Eigendom krijgen'${property}"`);
opbrengst doel[eigenschap];
},
set: functie(doel, eigenschap, waarde){
troosten.log(`Eigenschap instellen'${property}" waarderen "${waarde}"`);
doel[eigenschap] = waarde;
},
};const volmacht = nieuwVolmacht(userObject, handler);
troosten.log (proxy.voornaam); // Eigenschap "firstName" Kennedy ophalen
troosten.log (proxy.achternaam); // Eigenschap "achternaam" Martins ophalen
proxy.leeftijd = 23; // Eigenschap instellen "leeftijd" waarderen "23"
Dit codeblok voegt functionaliteit toe via de proxy traps, krijgen En set. Wanneer u nu probeert toegang te krijgen tot een eigenschap van het gebruikerObject, logt het proxy-object eerst uw bewerking in de console voordat het de eigenschap opent of wijzigt.
Gegevens valideren voordat ze op een object worden ingesteld
U kunt proxy-objecten gebruiken om gegevens te valideren en ervoor te zorgen dat deze aan bepaalde criteria voldoen voordat u ze op een object instelt. U kunt dit doen door de validatielogica te definiëren in a set val in de behandelaar voorwerp.
Bijvoorbeeld:
const gebruikerObject = {
Voornaam: "Kennedy",
achternaam: "Martins",
leeftijd: 20,
};const behandelaar = {
krijgen: functie(doel, eigendom){
troosten.log(`Eigendom krijgen'${property}"`);
opbrengst doel[eigenschap];
},
set: functie(doel, eigenschap, waarde){
als (
eigendom "leeftijd" &&
soort van waarde == "nummer" &&
waarde > 0 &&
waarde < 120
) {
troosten.log(`Eigenschap instellen'${property}" waarderen "${waarde}"`);
doel[eigenschap] = waarde;
} anders {
gooiennieuwFout("Ongeldige parameter. Controleer en corrigeer.");
}
},
};
const volmacht = nieuwVolmacht(userObject, handler);
proxy.leeftijd = 21;
Dit codeblok voegt validatieregels toe aan het set val. U kunt elke waarde toekennen aan de leeftijd pand op een gebruikerObject voorbeeld. Maar met de toegevoegde validatieregels kunt u alleen een nieuwe waarde toekennen aan de eigenschap age als het een getal is, groter dan 0 en kleiner dan 120. Elke waarde die u probeert in te stellen op de leeftijd eigenschap die niet aan de vereiste criteria voldoet, veroorzaakt een fout en drukt een foutbericht af.
Toegang tot objecteigenschappen regelen
U kunt proxy-objecten gebruiken om bepaalde eigenschappen van een object te verbergen. Doe dit door beperkingslogica te definiëren in krijgen traps voor de eigenschappen waartoe u de toegang wilt beheren.
Bijvoorbeeld:
const gebruikerObject = {
Voornaam: "Kennedy",
achternaam: "Martins",
leeftijd: 20,
telefoon: 1234567890,
e-mail: "[email protected]",
};const behandelaar = {
krijgen: functie(doel, eigendom){
als (eigendom "telefoon" || eigendom "e-mail") {
gooiennieuwFout("Toegang tot informatie geweigerd");
} anders {
troosten.log(`Eigendom krijgen'${property}"`);
opbrengst doel[eigenschap];
}
},
set: functie(doel, eigenschap, waarde){
troosten.log(`Eigenschap instellen'${property}" waarderen "${waarde}"`);
doel[eigenschap] = waarde;
},
};const volmacht = nieuwVolmacht(userObject, handler);
troosten.log (proxy.voornaam); // Eigenschap "firstName" Kennedy ophalen
troosten.log (proxy.e-mail); // Gooit fout
Het bovenstaande codeblok voegt bepaalde beperkingen toe aan het krijgen val. In eerste instantie heeft u toegang tot alle beschikbare woningen op gebruikerObject. De toegevoegde regels voorkomen toegang tot gevoelige informatie zoals de e-mail of telefoon van de gebruiker. Als u probeert toegang te krijgen tot een van deze eigenschappen, wordt er een fout weergegeven.
Andere proxy-traps
De krijgen En set traps zijn de meest voorkomende en nuttigste, maar er zijn 11 andere JavaScript-proxytraps. Zij zijn:
- toepassen: De toepassen trap wordt uitgevoerd wanneer u een functie op het proxy-object aanroept.
- construeren: De construeren trap wordt uitgevoerd wanneer u de nieuwe operator gebruikt om een object te maken van het proxy-object.
- deleteProperty: De deleteProperty trap wordt uitgevoerd wanneer u de verwijderen operator om een eigenschap uit het proxy-object te verwijderen.
- heeft - De heeft trap wordt uitgevoerd wanneer u de in operator om te controleren of er een eigenschap bestaat op het proxy-object.
- eigen Sleutels - De eigen Sleutels trap wordt uitgevoerd wanneer u een van beide aanroept Object.getOwnPropertyNames of Object.getOwnPropertySymbols functie op het proxy-object.
- getOwnPropertyDescriptor - De getOwnPropertyDescriptor trap wordt uitgevoerd wanneer u de Object.getOwnPropertyDescriptor functie op het proxy-object.
- definieerEigenschap - De definieerEigenschap trap wordt uitgevoerd wanneer u de Object.defineProperty functie op het proxy-object.
- voorkomenExtensies - De voorkomenExtensies trap wordt uitgevoerd wanneer u de Object.preventExtensions functie op het proxy-object.
- isUitbreidbaar - De isUitbreidbaar trap wordt uitgevoerd wanneer u de Object.isExtensible functie op het proxy-object.
- getPrototypeOf - De getPrototypeOf trap wordt uitgevoerd wanneer u de Object.getPrototypeOf functie op het proxy-object.
- setPrototypeOf - De setPrototypeOf trap wordt uitgevoerd wanneer u de Object.setPrototypeOf functie op het proxy-object.
Zoals de set En krijgen traps kunt u deze traps gebruiken om nieuwe lagen van functionaliteit, validatie en controle aan uw object toe te voegen zonder het origineel te wijzigen.
De nadelen van proxy-objecten
Proxy-objecten kunnen een krachtig hulpmiddel zijn om aangepaste functionaliteit of validatie aan een object toe te voegen. Maar ze hebben ook enkele potentiële nadelen. Een van die nadelen is de moeilijkheid om te debuggen, omdat het moeilijk kan zijn om te zien wat er achter de schermen gebeurt.
Proxy-objecten kunnen ook moeilijk te gebruiken zijn, vooral als u er niet bekend mee bent. U moet deze nadelen zorgvuldig overwegen voordat u proxy-objecten in uw code gebruikt.