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 Procurationconstructeur. Ce constructeur prend deux arguments: a cible 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:
constante Objet d'origine = {
truc: "bar"
}constante gestionnaire = {
obtenir: fonction(cible, propriété){
retour cible[propriété] ;
},
ensemble: fonction(cible, propriété, valeur){
cible[propriété] = valeur ;
}
};
constante mandataire = nouveauProcuration(originalObject, gestionnaire)
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 ensemble. 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 ensemble piège.
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:
constante objetutilisateur = {
prénom: "Kennedi",
nom de famille: "Martins",
âge: 20 ans,
};constante gestionnaire = {
obtenir: fonction(cible, propriété){
console.enregistrer(`Obtenir une propriété "${propriété}"`);
retour cible[propriété] ;
},
ensemble: fonction(cible, propriété, valeur){
console.enregistrer(`Définir la propriété "${propriété}" évaluer "${valeur}"`);
cible[propriété] = valeur ;
},
};constante mandataire = nouveauProcuration(userObject, gestionnaire);
console.log (proxy.firstName); // Récupère la propriété "firstName" Kennedy
console.log (proxy.lastName); // Récupération de la propriété "lastName" Martins
proxy.age = 23; // Définition de la propriété "âge" évaluer "23"
Ce bloc de code ajoute des fonctionnalités via les traps proxy, obtenir et ensemble. 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 ensemble piège dans le gestionnaire objet.
Par exemple:
constante objetutilisateur = {
prénom: "Kennedi",
nom de famille: "Martins",
âge: 20 ans,
};constante gestionnaire = {
obtenir: fonction(cible, propriété){
console.enregistrer(`Obtenir une propriété "${propriété}"`);
retour cible[propriété] ;
},
ensemble: fonction(cible, propriété, valeur){
si (
propriété "âge" &&
Type de valeur == "nombre" &&
valeur > 0 &&
valeur < 120
) {
console.enregistrer(`Définir la propriété "${propriété}" évaluer "${valeur}"`);
cible[propriété] = valeur ;
} autre {
lancernouveauErreur("Paramètre invalide. Veuillez vérifier et corriger.");
}
},
};
constante mandataire = nouveauProcuration(userObject, gestionnaire);
proxy.age = 21 ;
Ce bloc de code ajoute des règles de validation au ensemble 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 le â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:
constante objetutilisateur = {
prénom: "Kennedi",
nom de famille: "Martins",
âge: 20 ans,
téléphone: 1234567890,
e-mail: "[email protected]",
};constante gestionnaire = {
obtenir: fonction(cible, propriété){
si (propriété "téléphone" || propriété "e-mail") {
lancernouveauErreur("Accès aux informations refusé");
} autre {
console.enregistrer(`Obtenir une propriété "${propriété}"`);
retour cible[propriété] ;
}
},
ensemble: fonction(cible, propriété, valeur){
console.enregistrer(`Définir la propriété "${propriété}" évaluer "${valeur}"`);
cible[propriété] = valeur ;
},
};constante mandataire = nouveauProcuration(userObject, gestionnaire);
console.log (proxy.firstName); // Récupère la propriété "firstName" Kennedy
console.log (proxy.email); // Génère une erreur
Le bloc de code ci-dessus ajoute certaines restrictions au obtenir 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 ensemble les pièges sont les plus courants et les plus utiles, mais il existe 11 autres pièges proxy JavaScript. Ils 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 supprimer 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 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 ensemble 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 des 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.