Home-theater-designers
Un objet proxy JavaScript vous permet d'intercepter et de personnaliser le comportement d'un autre objet, sans modifier l'original.
À l'aide d'objets proxy, vous pouvez valider des données, fournir des fonctionnalités supplémentaires et contrôler l'accès aux propriétés et aux fonctions.
Découvrez tout sur les utilisations des objets proxy et comment vous pouvez les créer en JavaScript.
Création d'un objet proxy
En JavaScript, vous pouvez créer des objets proxy en utilisant le Procuration constructeur . Ce constructeur prend deux arguments : a cibler objet pour envelopper le proxy et un gestionnaire objet dont les propriétés définissent le comportement du proxy lorsque vous effectuez des opérations.
Il prend ces arguments et crée un objet que vous pouvez utiliser à la place de l'objet cible. Cet objet créé peut redéfinir les opérations de base telles que l'obtention, la définition et la définition des propriétés. Vous pouvez également utiliser ces objets proxy pour consigner les accès aux propriétés et valider, formater ou nettoyer les entrées.
Par exemple:
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)
Ce code crée un objet cible, objet d'origine , avec une seule propriété, fou , et un objet gestionnaire, gestionnaire . L'objet gestionnaire contient deux propriétés, obtenir et Positionner . Ces propriétés sont appelées pièges.
Une interruption d'objet proxy est une fonction appelée chaque fois que vous effectuez une action spécifiée sur un objet proxy. Les interruptions vous permettent d'intercepter et de personnaliser le comportement de l'objet proxy. L'accès à une propriété à partir de l'objet proxy appelle le obtenir trap, et la modification ou la manipulation d'une propriété à partir de l'objet proxy appelle le Positionner prendre au piège.
meilleur éditeur vidéo gratuit pour iphone
Enfin, le code crée un objet proxy avec le Procuration constructeur. Ça passe objet d'origine et gestionnaire comme objet cible et gestionnaire, respectivement.
Utilisation d'objets proxy
Les objets proxy ont plusieurs utilisations en JavaScript, dont certaines sont les suivantes.
Ajout de fonctionnalités à un objet
Vous pouvez utiliser un objet proxy pour envelopper un objet existant et ajouter de nouvelles fonctionnalités, telles que la journalisation ou la gestion des erreurs , sans modifier l'objet d'origine.
Pour ajouter de nouvelles fonctionnalités, vous devrez utiliser le Procuration constructeur et définissez un ou plusieurs pièges pour les actions que vous souhaitez intercepter.
Par exemple:
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"
Ce bloc de code ajoute des fonctionnalités via les traps proxy, obtenir et Positionner . Maintenant, lorsque vous essayez d'accéder ou de modifier une propriété du userObject , l'objet proxy enregistrera d'abord votre opération dans la console avant d'accéder à la propriété ou de la modifier.
Validation des données avant de les définir sur un objet
Vous pouvez utiliser des objets proxy pour valider les données et vous assurer qu'elles répondent à certains critères avant de les définir sur un objet. Vous pouvez le faire en définissant la logique de validation dans un Positionner piège dans le gestionnaire objet.
Par exemple:
comment ajouter des fonds au portefeuille playstation
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;
Ce bloc de code ajoute des règles de validation au Positionner prendre au piège. Vous pouvez attribuer n'importe quelle valeur au âge propriété sur un userObject exemple. Mais, avec les règles de validation ajoutées, vous ne pouvez attribuer une nouvelle valeur à la propriété age que s'il s'agit d'un nombre supérieur à 0 et inférieur à 120. Toute valeur que vous essayez de définir sur la âge propriété qui ne répond pas aux critères requis déclenchera une erreur et imprimera un message d'erreur.
Contrôle de l'accès aux propriétés de l'objet
Vous pouvez utiliser des objets proxy pour masquer certaines propriétés d'un objet. Pour ce faire, définissez la logique de restriction dans obtenir des interruptions pour les propriétés dont vous souhaitez contrôler l'accès.
Par exemple:
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
Le bloc de code ci-dessus ajoute certaines restrictions au obtenir prendre au piège. Initialement, vous pouvez accéder à toutes les propriétés disponibles sur userObject . Les règles ajoutées empêchent l'accès aux informations sensibles telles que l'e-mail ou le téléphone de l'utilisateur. Essayer d'accéder à l'une de ces propriétés déclenchera une erreur.
Autres pièges proxy
Le obtenir et Positionner les pièges sont les plus courants et les plus utiles, mais il existe 11 autres pièges proxy JavaScript. Elles sont:
- appliquer : Le appliquer trap s'exécute lorsque vous appelez une fonction sur l'objet proxy.
- construction : Le construction trap s'exécute lorsque vous utilisez l'opérateur new pour créer un objet à partir de l'objet proxy.
- supprimerPropriété : Le supprimerPropriété le piège s'exécute lorsque vous utilisez le effacer opérateur pour supprimer une propriété de l'objet proxy.
- a - Le a le piège s'exécute lorsque vous utilisez le dans opérateur pour vérifier si une propriété existe sur l'objet proxy.
- propres clés - Le propres clés trap s'exécute lorsque vous appelez soit le Object.getOwnPropertyNames ou alors Object.getOwnPropertySymbolsObject.getOwnPropertySymbols fonction sur l'objet proxy.
- getOwnPropertyDescriptorgetOwnPropertyDescriptor - Le getOwnPropertyDescriptorgetOwnPropertyDescriptor le piège s'exécute lorsque vous appelez le Object.getOwnPropertyDescriptor fonction sur l'objet proxy.
- définirPropriété - Le définirPropriété le piège s'exécute lorsque vous appelez le Object.definePropertyObject.defineProperty fonction sur l'objet proxy.
- empêcher les extensions - Le empêcher les extensions le piège s'exécute lorsque vous appelez le Object.preventExtensionsObject.preventExtensions fonction sur l'objet proxy.
- estExtensible - Le estExtensible le piège s'exécute lorsque vous appelez le Object.isExtensibleObject.isExtensible fonction sur l'objet proxy.
- getPrototypeOf - Le getPrototypeOf le piège s'exécute lorsque vous appelez le Object.getPrototypeOfObject.getPrototypeOf fonction sur l'objet proxy.
- setPrototypeOf - Le setPrototypeOf le piège s'exécute lorsque vous appelez le Object.setPrototypeOfObject.setPrototypeOf fonction sur l'objet proxy.
Comme le Positionner et obtenir traps, vous pouvez utiliser ces traps pour ajouter de nouvelles couches de fonctionnalité, de validation et de contrôle à votre objet sans modifier l'original.
Les inconvénients des objets proxy
Les objets proxy peuvent être un outil puissant pour ajouter une fonctionnalité personnalisée ou une validation à un objet. Mais ils ont aussi quelques inconvénients potentiels. L'un de ces inconvénients est la difficulté de débogage, car il peut être difficile de voir ce qui se passe dans les coulisses.
Les objets proxy peuvent également être difficiles à utiliser, surtout si vous ne les connaissez pas. Vous devez examiner attentivement ces inconvénients avant d'utiliser des objets proxy dans votre code.