Comprendre l’objet Proxy en JavaScript

J’ai découvert l’objet JavaScript Proxy il y a peu de temps et je l’ai trouvé super utile dans de nombreuses situations, j’ai donc décidé d’écrire à son sujet.

Première question, qu’est-ce que l’objet Proxy ?

L’objet Proxy vous permet de créer un proxy pour un autre objet, qui peut intercepter et redéfinir les opérations fondamentales de cet objet. -MDN
The Proxy object enables you to create a proxy for another object, which can intercept and redefine fundamental operations for that object. -MDN

Prenons un exemple. Disons que vous voulez vérifier que l’âge de l’utilisateur est au moins égal à 18+ et que vous le faites lorsque vous définissez son âge, avec la fonction d’objet proxy, vous le ferez de la manière suivante :

const target = {
  age: 22,
};

const handler = {
  set: (target, prop, value) => {
    // checking if the property "age" is a number
    if (prop === "age") {
      if (!Number.isInteger(value)) {
        throw new TypeError("The age is not an integer");
      }

      // checking the value we are trying to set
      if (value < 18) {
        throw new RangeError("The user must be 18+");
      }
    }

    // the default behabior to store the value
    target[prop] = value;

    //Indicate success
    return true;
  },
  get: (target, prop) => {
    return target[prop] || "Not Found";
  },
};

const person = new Proxy(target, handler);

person.age = 28;
console.log(person.age); // 28
person.age = "John"; // Throws an exception: (TypeError: The age is not an integer)
person.age = 12; // Throws an exception: (RangeError: The user must be 18+)

Pour créer notre proxy, il suffit d’utiliser la syntaxe suivante :

const person = new Proxy(target, handler);

L’objet Proxy prend deux paramètres :

• target : l’objet que vous voulez proxyer, Il peut aussi être un objet vide
• handler : un objet qui définit quelles opérations seront interceptées et comment redéfinir les opérations interceptées, c’est le « noyau » du proxy.

Handler

const handler = {
  set: (target, prop, value) => {
    // checking if the property "age" is a number
    if (prop === "age") {
      if (!Number.isInteger(value)) {
        throw new TypeError("The age is not an integer");
      }

      // checking the value we are trying to set
      if (value < 18) {
        throw new RangeError("The user must be 18+");
      }
    }

    // the default behabior to store the value
    target[prop] = value;

    //Indicate success
    return true;
  },
  get: (target, prop) => {
    return target[prop] || "Not Found";
  },
};

Le gestionnaire fonctionne avec deux fonctions, get() et set() :

• get() est déclenché lorsqu’une propriété de l’objet cible est accédée via l’objet proxy : par exemple console.log(person.age).
• set() est déclenché lorsqu’une propriété de l’objet cible est définie via l’objet proxy : par exemple person.age = 20.

Dans ce cas, nous vérifions si l’âge que nous avons défini est un nombre et s’il est supérieur à 18, sinon nous lançons une erreur.

Il existe également d’autres déclencheurs que vous pouvez consulter ici javascript.info/proxy.

J’espère que cela vous a été utile, merci de m’avoir lu !