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 !

Alfredhttps://www.alfreddagenais.com
Je suis un développeur Web Full Stack sénior. Chaque jour est pour moi une journée de plus pour découvrir de nouvelles idées. Le développement web et l'informatique sont omniprésents dans mon quotidien. Pour que la créativité soit à son maximum, il ne faut pas avoir peur d’expérimenter et nous avons tous que le Web est infiniment grand pour expérimenter nos idées.

Buy me a coffee Paypal Patreon Ko-Fi

Share this article

Recent posts

Popular categories

LAISSER UN COMMENTAIRE

S'il vous plaît entrez votre commentaire!
S'il vous plaît entrez votre nom ici

Recent comments