Home-theater-designers
Ett JavaScript-proxyobjekt låter dig fånga upp och anpassa beteendet för ett annat objekt utan att ändra originalet.
Med hjälp av proxyobjekt kan du validera data, tillhandahålla extra funktionalitet och kontrollera åtkomst till egenskaper och funktioner.
Ta reda på allt om användningen av proxyobjekt och hur du kan skapa dem i JavaScript.
Skapa ett proxyobjekt
I JavaScript kan du skapa proxyobjekt med hjälp av Ombud konstruktör . Denna konstruktor tar två argument: a mål objekt att linda proxyn runt och en hanterare objekt vars egenskaper definierar proxyns beteende när du utför operationer.
hur man skapar genvägar på iphone
Den tar dessa argument och skapar ett objekt som du kan använda i stället för målobjektet. Detta skapade objekt kan omdefiniera kärnoperationer som att hämta, ställa in och definiera egenskaper. Du kan också använda dessa proxyobjekt för att logga egendomsåtkomster och validera, formatera eller rensa indata.
Till exempel:
const originalObject = {
foo: "bar"
}
const handler = {
get: function(target, property) {
return target[property];
},
set: function(target, property, value) {
target[property] = value;
}
};
const proxy = new Proxy(originalObject, handler)
Denna kod skapar ett målobjekt, originalobjekt , med en enda fastighet, foo , och ett hanterarobjekt, hanterare . Hanterarobjektet innehåller två egenskaper, skaffa sig och uppsättning . Dessa egenskaper är kända som fällor.
En proxyobjektfälla är en funktion som anropas när du utför en specificerad åtgärd på ett proxyobjekt. Fällor låter dig fånga upp och anpassa beteendet för proxyobjektet. Att komma åt en egenskap från proxyobjektet anropar skaffa sig trap, och modifiering eller manipulering av en egenskap från proxyobjektet anropar uppsättning fälla.
Slutligen skapar koden ett proxyobjekt med Ombud konstruktör. Det går över originalobjekt och hanterare som målobjekt respektive hanterare.
Använda proxyobjekt
Proxyobjekt har flera användningsområden i JavaScript, av vilka några är följande.
Lägga till funktionalitet till ett objekt
Du kan använda ett proxyobjekt för att linda ett befintligt objekt och lägga till ny funktionalitet, såsom loggning eller felhantering utan att ändra det ursprungliga objektet.
För att lägga till ny funktionalitet måste du använda Ombud konstruktor och definiera en eller flera fällor för de åtgärder du vill fånga upp.
Till exempel:
const userObject = {
firstName: "Kennedy",
lastName: "Martins",
age: 20,
};
const handler = {
get: function (target, property) {
console.log(`Getting property "${property}"`);
return target[property];
},
set: function (target, property, value) {
console.log(`Setting property "${property}" to value "${value}"`);
target[property] = value;
},
};
const proxy = new Proxy(userObject, handler);
console.log(proxy.firstName); // Getting property "firstName" Kennedy
console.log(proxy.lastName); // Getting property "lastName" Martins
proxy.age = 23; // Setting property "age" to value "23"
Detta kodblock lägger till funktionalitet via proxyfällorna, skaffa sig och uppsättning . Nu, när du försöker komma åt eller ändra en egenskap hos userObject , loggar proxyobjektet först din operation till konsolen innan det går åt eller ändrar egenskapen.
Validera data innan du ställer in den på ett objekt
Du kan använda proxyobjekt för att validera data och säkerställa att den uppfyller vissa kriterier innan du ställer in den på ett objekt. Du kan göra det genom att definiera valideringslogiken i en uppsättning fälla i hanterare objekt.
Till exempel:
const userObject = {
firstName: "Kennedy",
lastName: "Martins",
age: 20,
};
const handler = {
get: function (target, property) {
console.log(`Getting property "${property}"`);
return target[property];
},
set: function (target, property, value) {
if (
property === "age" &&
typeof value == "number" &&
value > 0 &&
value < 120
) {
console.log(`Setting property "${property}" to value "${value}"`);
target[property] = value;
} else {
throw new Error("Invalid parameter. Please review and correct.");
}
},
};
const proxy = new Proxy(userObject, handler);
proxy.age = 21;
Detta kodblock lägger till valideringsregler till uppsättning fälla. Du kan tilldela valfritt värde till ålder fastighet på en userObject exempel. Men med de tillagda valideringsreglerna kan du bara tilldela åldersegenskapen ett nytt värde om det är ett tal, större än 0 och mindre än 120. Alla värden du försöker ange på ålder egenskap som inte uppfyller kraven kommer att utlösa ett fel och skriva ut ett felmeddelande.
Styr åtkomst till objektegenskaper
Du kan använda proxyobjekt för att dölja vissa egenskaper hos ett objekt. Gör det genom att definiera begränsningslogik i skaffa sig fällor för de egenskaper du vill kontrollera åtkomsten till.
Till exempel:
const userObject = {
firstName: "Kennedy",
lastName: "Martins",
age: 20,
phone: 1234567890,
email: "foo@bar.com",
};
const handler = {
get: function (target, property) {
if (property === "phone" || property === "email") {
throw new Error("Access to info denied");
} else {
console.log(`Getting property "${property}"`);
return target[property];
}
},
set: function (target, property, value) {
console.log(`Setting property "${property}" to value "${value}"`);
target[property] = value;
},
};
const proxy = new Proxy(userObject, handler);
console.log(proxy.firstName); // Getting property "firstName" Kennedy
console.log(proxy.email); // Throws error
Kodblocket ovan lägger till vissa begränsningar till skaffa sig fälla. Till en början kan du komma åt alla tillgängliga fastigheter på userObject . De tillagda reglerna förhindrar åtkomst till känslig information som användarens e-post eller telefon. Om du försöker komma åt någon av dessa egenskaper utlöses ett fel.
Andra proxyfällor
De skaffa sig och uppsättning fällor är de vanligaste och mest användbara, men det finns 11 andra JavaScript-proxy-fällor. Dom är:
- tillämpa : Den tillämpa trap körs när du anropar en funktion på proxyobjektet.
- konstruera : Den konstruera trap körs när du använder den nya operatorn för att skapa ett objekt från proxyobjektet.
- raderaProperty : Den raderaProperty fällan körs när du använder radera operatör för att ta bort en egenskap från proxyobjektet.
- har - Den har fällan körs när du använder i operatör för att kontrollera om en egenskap finns på proxyobjektet.
- egna nycklar - Den egna nycklar trap körs när du anropar antingen Object.getOwnPropertyNames eller Object.getOwnPropertySymbols funktion på proxyobjektet.
- getOwnPropertyDescriptor - Den getOwnPropertyDescriptor trap körs när du ringer Object.getOwnPropertyDescriptor funktion på proxyobjektet.
- definieraProperty - Den definieraProperty trap körs när du ringer Object.defineProperty funktion på proxyobjektet.
- förhindra tillägg - Den förhindra tillägg trap körs när du ringer Object.preventExtensions funktion på proxyobjektet.
- är utdragbar - Den är utdragbar trap körs när du ringer Object.isExtensible funktion på proxyobjektet.
- getPrototypeOf - Den getPrototypeOf trap körs när du ringer Object.getPrototypeOf funktion på proxyobjektet.
- setPrototypeOf - Den setPrototypeOf trap körs när du ringer Object.setPrototypeOf funktion på proxyobjektet.
Som uppsättning och skaffa sig traps kan du använda dessa traps för att lägga till nya lager av funktionalitet, validering och kontroll till ditt objekt utan att ändra originalet.
Nackdelarna med proxyobjekt
Proxyobjekt kan vara ett kraftfullt verktyg för att lägga till anpassad funktionalitet eller validering till ett objekt. Men de har också några potentiella nackdelar. En sådan nackdel är svårigheter att felsöka, eftersom det kan vara svårt att se vad som händer bakom kulisserna.
Proxyobjekt kan också vara svåra att använda, speciellt om du inte är bekant med dem. Du bör noga överväga dessa nackdelar innan du använder proxyobjekt i din kod.