Comment fonctionnent les objets proxy en JavaScript ?

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 à l’aide du constructeur Proxy . Ce constructeur prend deux arguments : un objet cible pour envelopper le proxy et un objet gestionnaire 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, originalObject , avec une seule propriété, foo , et un objet gestionnaire, handler . L’objet gestionnaire contient deux propriétés, get et set . 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 l’ interruption get , et la modification ou la manipulation d’une propriété à partir de l’objet proxy appelle l’ interruption set .

Enfin, le code crée un objet proxy avec le constructeur Proxy . Il transmet originalObject et handler comme objet cible et handler, 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 constructeur Proxy et définir 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;
  },
};

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 pièges proxy, get et set . Désormais, lorsque vous essayez d’accéder ou de modifier une propriété de userObject , l’objet proxy enregistrera d’abord votre opération dans la console avant d’accéder ou de modifier la propriété.

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 une interruption définie dans l’ objet gestionnaire .

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) {
    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 piège défini . Vous pouvez affecter n’importe quelle valeur à la propriété age sur une instance userObject . 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 propriété age 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 une logique de restriction dans les interruptions get pour les propriétés auxquelles 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;
  },
};

console.log(proxy.firstName); // Getting property "firstName"Kennedy
console.log(proxy.email); // Throws error


Le bloc de code ci-dessus ajoute certaines restrictions au piège get . 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

Les pièges get et set sont les plus courants et les plus utiles, mais il existe 11 autres pièges proxy JavaScript. Elles sont:

• apply : le déroutement d’ application s’exécute lorsque vous appelez une fonction sur l’objet proxy.
• construct : le piège de construction s’exécute lorsque vous utilisez l’opérateur new pour créer un objet à partir de l’objet proxy.
• deleteProperty : l’ interruption deleteProperty s’exécute lorsque vous utilisez l’ opérateur delete pour supprimer une propriété de l’objet proxy.
• has – L’ interruption has s’exécute lorsque vous utilisez l’ opérateur in pour vérifier si une propriété existe sur l’objet proxy.
• ownKeys – L’ interruption ownKeys s’exécute lorsque vous appelez la fonction Object.getOwnPropertyNames ou Object.getOwnPropertySymbols sur l’objet proxy.
• getOwnPropertyDescriptor – L’ interruption getOwnPropertyDescriptor s’exécute lorsque vous appelez la fonction Object.getOwnPropertyDescriptor sur l’objet proxy.
• defineProperty – L’ interruption de defineProperty s’exécute lorsque vous appelez la fonction Object.defineProperty sur l’objet proxy.
• preventExtensions – L’ interruption preventExtensions s’exécute lorsque vous appelez la fonction Object.preventExtensions sur l’objet proxy.
• isExtensible – L’ interruption isExtensible s’exécute lorsque vous appelez la fonction Object.isExtensible sur l’objet proxy.
• getPrototypeOf – L’ interruption getPrototypeOf s’exécute lorsque vous appelez la fonction Object.getPrototypeOf sur l’objet proxy.
• setPrototypeOf – L’ interruption setPrototypeOf s’exécute lorsque vous appelez la fonction Object.setPrototypeOf sur l’objet proxy.

Comme les interruptions set et get , vous pouvez utiliser ces interruptions 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.