JavaScript Academy · Leçon

Cas pratiques des Proxy

Créez des objets pour la validation, la journalisation et la réactivité.

Cas pratiques des Proxy est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Les proxies en pratique

Vous allez maintenant combiner les proxies et Reflect pour résoudre des problèmes réels : validation, enregistrement, valeurs par défaut et bien plus. Chaque modèle enveloppe un objet simple sans le modifier.

Enveloppe de validation

Imposez un schéma : rejetez toute écriture qui ne respecte pas une règle. La cible reste propre, car les données invalides n'y sont jamais enregistrées.

function validated(obj, rules) {
  return new Proxy(obj, {
    set(target, prop, value, receiver) {
      const rule = rules[prop];
      if (rule && !rule(value)) {
        throw new TypeError('invalid value for ' + prop);
      }
      return Reflect.set(target, prop, value, receiver);
    }
  });
}

const user = validated({}, { age: v => v >= 0 });
user.age = 25;
console.log(user.age);
try { user.age = -1; } catch (e) { console.log(e.message); }

Enveloppe d'enregistrement

Suivez chaque lecture et chaque écriture à des fins de débogage en transmettant l'opération via Reflect après l'avoir enregistrée.

function logged(obj) {
  return new Proxy(obj, {
    get(t, p, r) { console.log('GET ' + p); return Reflect.get(t, p, r); },
    set(t, p, v, r) { console.log('SET ' + p + '=' + v); return Reflect.set(t, p, v, r); }
  });
}

const data = logged({ count: 0 });
data.count = 5;
console.log(data.count);

Valeurs par défaut

Renvoyez une valeur de remplacement pour toute propriété manquante afin que les lectures ne renvoient jamais undefined.

function withDefault(obj, fallback) {
  return new Proxy(obj, {
    get(t, p, r) {
      return p in t ? Reflect.get(t, p, r) : fallback;
    }
  });
}

const scores = withDefault({ ada: 90 }, 0);
console.log(scores.ada);
console.log(scores.unknown);

Indices négatifs des tableaux

Permettez aux tableaux de prendre en charge les indices négatifs comme en Python en les convertissant dans un piège get.

function negIndex(arr) {
  return new Proxy(arr, {
    get(t, p, r) {
      const i = Number(p);
      if (Number.isInteger(i) && i < 0) {
        return Reflect.get(t, t.length + i, r);
      }
      return Reflect.get(t, p, r);
    }
  });
}

const list = negIndex(['a', 'b', 'c']);
console.log(list[-1]);
console.log(list[0]);

Vue en lecture seule

Exposez un objet qui peut être lu mais jamais modifié, ce qui est utile pour protéger une configuration partagée.

function readonly(obj) {
  return new Proxy(obj, {
    set() { console.log('blocked write'); return false; },
    deleteProperty() { console.log('blocked delete'); return false; }
  });
}

const config = readonly({ apiUrl: '/api' });
config.apiUrl = '/hacked';
console.log(config.apiUrl);

Comptage des accès

Suivez le nombre de lectures de chaque propriété en stockant counts en dehors de la cible.

function counted(obj) {
  const counts = {};
  const proxy = new Proxy(obj, {
    get(t, p, r) {
      counts[p] = (counts[p] || 0) + 1;
      return Reflect.get(t, p, r);
    }
  });
  return { proxy, counts };
}

const { proxy, counts } = counted({ x: 1 });
proxy.x; proxy.x; proxy.x;
console.log(counts.x);

Propriétés virtuelles calculées

Exposez des valeurs dérivées qui ne sont pas stockées et qui sont recalculées à chaque lecture.

const rect = new Proxy({ width: 4, height: 3 }, {
  get(t, p, r) {
    if (p === 'area') return t.width * t.height;
    return Reflect.get(t, p, r);
  }
});

console.log(rect.area);
rect.width = 10;
console.log(rect.area);

Lever une exception lors des lectures inconnues

Repérez rapidement les fautes de frappe en levant une exception lorsque le code lit une propriété inexistante.

function strict(obj) {
  return new Proxy(obj, {
    get(t, p, r) {
      if (typeof p === 'string' && !(p in t)) {
        throw new ReferenceError('unknown property: ' + p);
      }
      return Reflect.get(t, p, r);
    }
  });
}

const o = strict({ name: 'Ada' });
console.log(o.name);
try { console.log(o.naem); } catch (e) { console.log(e.message); }

Combiner les préoccupations

Les enveloppes réelles combinent souvent validation et enregistrement dans un seul gestionnaire, chaque piège transmettant l'opération à Reflect.

const account = new Proxy({ balance: 0 }, {
  set(t, p, v, r) {
    if (p === 'balance' && v < 0) throw new RangeError('no overdraft');
    console.log(p + ' set to ' + v);
    return Reflect.set(t, p, v, r);
  }
});

account.balance = 100;
console.log(account.balance);
try { account.balance = -50; } catch (e) { console.log(e.message); }

Pourquoi ces modèles sont importants

Les proxies ajoutent des comportements transversaux, comme la validation, l'enregistrement, les valeurs par défaut et le contrôle des accès, sans polluer l'objet original ni son code appelant. C'est exactement ainsi que les frameworks réactifs observent les changements de state. Utilisez-les lorsque vous avez besoin d'une interception transparente.

const observed = new Proxy({ n: 0 }, {
  set(t, p, v, r) {
    const ok = Reflect.set(t, p, v, r);
    console.log(p + ' is now ' + t[p]);
    return ok;
  }
});
observed.n = 1;
observed.n = 2;

Vérification rapide

Quel piège de proxy utiliseriez-vous pour rejeter les valeurs invalides avant leur enregistrement ?

Récapitulatif : cas d'utilisation pratiques des proxies

Vous avez appliqué les proxies à des problèmes réels :

La validation dans le piège set rejette les données incorrectes.
L'enregistrement suit les lectures et les écritures via Reflect.
Les valeurs par défaut et les propriétés virtuelles résident dans le piège get.
Les vues en lecture seule, le comptage des accès et la détection stricte des fautes de frappe enveloppent tous les objets de manière transparente.

Questions Fréquemment Posées

La leçon « Cas pratiques des Proxy » est-elle gratuite ?

Oui — le texte complet de « Cas pratiques des Proxy » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Cas pratiques des Proxy » ?

Créez des objets pour la validation, la journalisation et la réactivité. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Cas pratiques des Proxy » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy