const cible = {  message1: "coucou",  message2: "tout le monde",};const gestionnaire1 = {};const proxy1 = new Proxy(cible, gestionnaire1);

console.log(proxy1.message1); // coucouconsole.log(proxy1.message2); // tout le monde

const cible = {  message1: "coucou",  message2: "tout le monde",};const gestionnaire2 = {  get(cible, prop, recepteur) {    return "le monde";  },};const proxy2 = new Proxy(cible, gestionnaire2);

console.log(proxy2.message1); // le mondeconsole.log(proxy2.message2); // le monde

const cible = {  message1: "coucou",  message2: "tout le monde",};const gestionnaire3 = {  get(cible, prop, recepteur) {    if (prop === "message2") {      return "le monde";    }    return Reflect.get(...arguments);  },};const proxy3 = new Proxy(cible, gestionnaire3);console.log(proxy3.message1); // coucouconsole.log(proxy3.message2); // le monde

const handler = {  get(obj, prop) {    return prop in obj ? obj[prop] : 37;  },};const p = new Proxy({}, handler);p.a = 1;p.b = undefined;console.log(p.a, p.b);// 1, undefinedconsole.log("c" in p, p.c);// false, 37

const target = {};const p = new Proxy(target, {});p.a = 37;// L'opération est transmise à la cible par le proxyconsole.log(target.a);// 37// L'opération a bien été transmise

let validateur = {  set: function (obj, prop, valeur) {    if (prop === "age") {      if (!Number.isInteger(valeur)) {        throw new TypeError("Cet a n'est pas un entier.");      }      if (valeur > 200) {        throw new RangeError("Cet âge semble invalide.");      }    }    // Le comportement par défaut : enregistrer la valeur    obj[prop] = valeur;    // On indique le succès de l'opération    return true;  },};const personne = new Proxy({}, validateur);personne.age = 100;console.log(personne.age); // 100personne.age = "jeune"; // lève une exceptionpersonne.age = 300; // lève une exception

function etendre(sup, base) {  var descripteur = Object.getOwnPropertyDescriptor(    base.prototype,    "constructor",  );  base.prototype = Object.create(sup.prototype);  var gestionnaire = {    construct: function (cible, args) {      var obj = Object.create(base.prototype);      this.apply(cible, obj, args);      return obj;    },    apply: function (cible, that, args) {      sup.apply(that, args);      base.apply(that, args);    },  };  var proxy = new Proxy(base, gestionnaire);  descripteur.value = proxy;  Object.defineProperty(base.prototype, "constructor", descripteur);  return proxy;}var Personne = function (nom) {  this.nom = nom;};var Garcon = etendre(Personne, function (nom, âge) {  this.âge = âge;});Garcon.prototype.genre = "M";var Pierre = new Garcon("Pierre", 13);console.log(Pierre.genre); // "M"console.log(Pierre.nom); // "Pierre"console.log(Pierre.âge); // 13

let vue = new Proxy(  {    selected: null,  },  {    set(obj, prop, nouvelleValeur) {      let ancienneValeur = obj[prop];      if (prop === "selected") {        if (ancienneValeur) {          ancienneValeur.setAttribute("aria-selected", "false");        }        if (nouvelleValeur) {          nouvelleValeur.setAttribute("aria-selected", "true");        }      }      // Le comportement par défaut : enregistrer la valeur      obj[prop] = nouvelleValeur;      // On indique le succès de l'opération      return true;    },  },);const element1 = document.getElementById("elem-1");const element2 = document.getElementById("elem-2");// on sélectionne element1vue.selected = element1;console.log(`element1 : ${element1.getAttribute("aria-selected")}`);// element1 : true// on sélectionne element2 et cela entraîne// la déselection automatique de element1vue.selected = element2;console.log(`element1 : ${element1.getAttribute("aria-selected")}`);// element1 : falseconsole.log(`element2 : ${element2.getAttribute("aria-selected")}`);// element2 : true

let produits = new Proxy(  {    navigateurs: ["Internet Explorer", "Netscape"],  },  {    get(obj, prop) {      // Une propriété supplémentaire      if (prop === "dernierNavigateur") {        return obj.navigateurs[obj.navigateurs.length - 1];      }      // Le comportement par défaut : renvoyer la valeur      return obj[prop];    },    set(obj, prop, valeur) {      // Une propriété supplémentaire      if (prop === "dernierNavigateur") {        obj.navigateurs.push(valeur);        return true;      }      // on convertit la valeur si ce n'est pas un tableau      if (typeof valeur === "string") {        valeur = [valeur];      }      // Le comportement par défaut : enregistrer la valeur      obj[prop] = valeur;      // On indique le succès de l'opération      return true;    },  },);console.log(produits.navigateurs);// ['Internet Explorer', 'Netscape']produits.navigateurs = "Firefox";// on passe une chaîneconsole.log(produits.navigateurs);// ['Firefox'] <- pas de problème, elle est convertie en tableauproduits.dernierNavigateur = "Chrome";console.log(produits.navigateurs);// ['Firefox', 'Chrome']console.log(produits.dernierNavigateur);// 'Chrome'

let produits = new Proxy(  [    { nom: "Firefox", type: "navigateur" },    { nom: "SeaMonkey", type: "navigateur" },    { nom: "Thunderbird", type: "client mail" },  ],  {    get(obj, prop) {      // Le comportement par défaut : on renvoie la valeur      // prop est généralement un entier      if (prop in obj) {        return obj[prop];      }      // On obtient le nombre de produits      // un alias pour products.length      if (prop === "nombre") {        return obj.length;      }      let resultat,        types = {};      for (let produit of obj) {        if (produit.nom === prop) {          resultat = produit;        }        if (types[produit.type]) {          types[produit.type].push(produit);        } else {          types[produit.type] = [produit];        }      }      // Obtenir un produit grâce à un nom      if (resultat) {        return resultat;      }      // Obtenir un produit par type      if (prop in types) {        return types[prop];      }      // Obtenir les types de produits      if (prop === "types") {        return Object.keys(types);      }      return undefined;    },  },);console.log(produits[0]);// { nom: 'Firefox', type: 'navigateur' }console.log(produits["Firefox"]);// { nom: 'Firefox', type: 'navigateur' }console.log(produits["Chrome"]);// undefinedconsole.log(produits.navigateur);// [{ nom: 'Firefox', type: 'navigateur' }, { nom: 'SeaMonkey', type: 'navigateur' }]console.log(produits.types);// ['navigateur', 'client mail']console.log(produits.nombre);// 3

/*  var docCookies = ... définir l'objet "docCookies" grâce à  https://reference.codeproject.com/dom/document/cookie/simple_document.cookie_framework*/var docCookies = new Proxy(docCookies, {  get(oTarget, sKey) {    return oTarget[sKey] || oTarget.getItem(sKey) || undefined;  },  set: function (oTarget, sKey, vValue) {    if (sKey in oTarget) {      return false;    }    return oTarget.setItem(sKey, vValue);  },  deleteProperty: function (oTarget, sKey) {    if ((!sKey) in oTarget) {      return false;    }    return oTarget.removeItem(sKey);  },  ownKeys: function (oTarget, sKey) {    return oTarget.keys();  },  has: function (oTarget, sKey) {    return sKey in oTarget || oTarget.hasItem(sKey);  },  defineProperty: function (oTarget, sKey, oDesc) {    if (oDesc && "value" in oDesc) {      oTarget.setItem(sKey, oDesc.value);    }    return oTarget;  },  getOwnPropertyDescriptor: function (oTarget, sKey) {    var vValue = oTarget.getItem(sKey);    return vValue      ? {          value: vValue,          writable: true,          enumerable: true,          configurable: false,        }      : undefined;  },});/* Test */console.log((docCookies.monCookie1 = "Première valeur"));console.log(docCookies.getItem("monCookie1"));docCookies.setItem("monCookie1", "Valeur modifiée");console.log(docCookies.monCookie1);

Help improve MDN

Cette page a été modifiée le⁨17 déc. 2024⁩ par lescontributeurs du MDN.