`Proxy / Proxy.revocable` în JavaScript

Proxy, Reflect și Symbol ES2015 (ES6)

Învelește un obiect și interceptează operațiile pe el: citire, scriere, ștergere, apel.

Sintaxă

const p = new Proxy(tinta, { get, set, has, deleteProperty, ... })
const { proxy, revoke } = Proxy.revocable(tinta, handler)

Ce face `Proxy / Proxy.revocable`

Un Proxy stă în fața unui obiect țintă. Obiectul handler conține „capcane” (traps), funcții apelate în locul operațiilor obișnuite: get la citirea unei proprietăți, set la scriere, has pentru in, deleteProperty pentru delete, apply la apelul unei funcții și altele. Operațiile fără capcană merg direct la țintă.

În capcane se folosesc de obicei metodele Reflect cu același nume, pentru comportamentul implicit. Proxy.revocable returnează un proxy și o funcție revoke; după revocare, orice operație pe proxy aruncă TypeError.

Proxy-urile stau la baza reactivității din Vue și a multor biblioteci de validare.

Parametri

Parametru	Descriere
`tinta`	Obiectul (sau funcția) învelit.
`handler`	Obiect cu capcanele.

Ce returnează

Un obiect proxy (la revocable: { proxy, revoke }).

Exemple

Exemplul 1: Valori implicite și validare

const produs = new Proxy({ nume: "Carte" }, {
  get(tinta, cheie, receptor) {
    return cheie in tinta ? Reflect.get(tinta, cheie, receptor) : `(fără ${String(cheie)})`;
  },
  set(tinta, cheie, valoare) {
    if (cheie === "pret" && !(valoare >= 0)) throw new RangeError("Preț invalid");
    return Reflect.set(tinta, cheie, valoare);
  },
});

produs.pret = 45;
console.log(produs.nume, produs.pret, produs.autor);
try {
  produs.pret = -1;
} catch (e) {
  console.log(e.message);
}

Rezultat

Carte 45 (fără autor)
Preț invalid

Exemplul 2: Jurnal al modificărilor și revocare

const { proxy: stare, revoke } = Proxy.revocable({}, {
  set(tinta, cheie, valoare) {
    console.log(`schimbat ${cheie}: ${tinta[cheie]} -> ${valoare}`);
    return Reflect.set(tinta, cheie, valoare);
  },
});

stare.contor = 1;
stare.contor = 2;
revoke();
try {
  stare.contor = 3;
} catch (e) {
  console.log(e.constructor.name);
}