JavaScript Proxy
Cosa sono, come si utilizzano e in cosa possono aiutarci.
I proxy sono usati in molte librerie e framework (ad esempio, sono alla base del modo in cui Vue gestisce la “reattività”). Risulta quindi utile avere una buona conoscenza di questo argomento, sia per chi utilizza queste tecnologie ogni giorno sia per chi vuole capire meglio come queste tecnologie funzionano sotto il cappello!
Un oggetto Proxy in JavaScript non è altro che un oggetto che ne racchiude un altro e ne intercetta le operazioni come, ad esempio, la lettura o la scrittura di proprietà.
Partiamo dalla sintassi:
const proxyObject = new Proxy(target, handler);- target: sarà l’oggetto da “wrappare”;
- handler: possiamo definirlo come l’oggetto di configurazione del nostro proxy che avrà al suo interno i metodi che intercetteranno le nostre operazioni sull’oggetto target, ad esempio GET per operazioni di lettura, SET per operazioni di scrittura, e molte altre.
Cerchiamo di spiegare l’immagine appena presentata con un esempio concreto:
const person = { name: "John", surname: "Cook", age: 33 };const handler = {
get(target, key) {
const result = target[key];
return result;
},
set(target, key, value) {
const result = target[key] = value;
return result;
},
};const proxyPerson = new Proxy(person, handler);
console.log(proxyPerson.name);
// John
In questo esempio abbiamo creato un contenitore per l’oggetto “person” che intercetta ogni operazione di lettura o scrittura sul nostro oggetto target, già da questo semplice esempio possiamo capire la potenza dei proxy in JavaScript. Avendo una sorta di “interceptor” dell’oggetto target, potremmo pensare anche di performare delle validazioni sulla scrittura o sulla lettura di alcune proprietà o potremmo derivare altre proprietà non ancora esistenti solo aggiungendo della logica alla funzione GET nel nostro oggetto handler.
Vediamo come fare, riprendendo dall’esempio di prima:
const person = { name: "John", surname: "Cook", age: 33 };const handler = {
get(target, key) {
if (key === "fullname") {
const result = `${target.name} - ${target.surname}`;
return result;
}
const result = target[key];
return result;
},
set(target, key, value) {
const result = (target[key] = value);
return result;
},
};const proxyPerson = new Proxy(person, handler);
console.log(proxyPerson.fullname);
// John - Cook
Come possiamo vedere dal codice, l’oggetto “person” non ha al suo interno la proprietà “fullname”, ma grazie al metodo GET all’interno del nostro handler siamo riusciti ad intercettare l’operazione e ad inserire della logica per derivarne un valore.
Come dicevamo prima, possiamo performare delle validazioni anche nelle operazioni di scrittura di un oggetto.
Riprendiamo sempre il nostro esempio, immaginando ora di voler performare una validazione sull’età della persona; aggiungiamo, ad esempio, una validazione per fare in modo che l’età non debba mai essere maggiore di 50:
const person = { name: "John", surname: "Cook", age: 33 };const handler = {
get(target, key) {
if (key === "fullname") {
const result = `${target.name} - ${target.surname}`;
return result;
}
const result = target[key];
return result;
},
set(target, key, value) {
if (key === "age" && value > 50) {
throw new Error("L'età non può essere maggiore di 50");
}
const result = (target[key] = value);
return result;
},
};const proxyPerson = new Proxy(person, handler);
proxyPerson.age = 51;
// throw Error("L'età non può essere maggiore di 50");
// Error: L'età non può essere maggiore di 50
Questo sarà il risultato quando proveremo a modificare la proprietà “age” dell’oggetto “person” con un valore che sia maggiore di 50.
Questo articolo aveva l’obiettivo di introdurti all’oggetto Proxy. Un esempio semplice ma che può dare buoni spunti per approfondire un argomento tanto affascinante quanto utile per chi sviluppa in JavaScript.
Spero sia stato utile!
Lascio qui qualche link funzionale all’approfondimento.
