La classe Proxy

La classe Proxy, introdotta con le specifiche ECMAScript 2015, consente
di creare oggetti che hanno la capacità di modificare il
comportamento predefinito di altri oggetti. Nella definizione di un
proxy per un oggetto, cioè di un'istanza della classe Proxy,
possiamo definire un handler e configurare trap per
intercettare l'accesso alle sue proprietà ed eventualmente
modificare il comportamento predefinito.

Per comprendere i concetti di base di un proxy, proviamo a fare un
semplice esempio. Supponiamo di voler tracciare sulla console ogni
accesso alle proprietà di un oggetto. Possiamo definire il seguente handler:

var handler = {
    get(target, propertyName) {
       console.log("Lettura di " + propertyName);
       return target[propertyName];
    },
    set(target, propertyName, value) {
       console.log("Assegnamento di " + value + " a " + propertyName);
       target[propertyName] = value;
    }
 };

Questo handler non è altro che un oggetto con due metodi, get() e set(), che intercettano rispettivamente gli accessi in lettura e scrittura alle proprietà dell'oggetto che vogliamo
monitorare. I metodi dell'handler sono chiamati trap e
consentono di intercettare accessi e manipolazioni relative all'oggetto di
destinazione, il target.

Nello specifico, il metodo get() scrive sulla console e
restituisce il valore della proprietà del target, mentre il metodo set() scrive il valore sulla console ed assegna il valore del
parametro value alla proprietà del target. In questo caso vogliamo
mantenere il comportamento standard dell'oggetto target, ma in
generale possiamo restituire o assegnare alla proprietà del target
qualsiasi valore, modificando quindi il comportamento predefinito.

Una volta definito l'handler, possiamo creare un proxy per un
oggetto specificandolo nel costruttore della classe Proxy, come nel
seguente esempio:

var persona = {nome: "Mario", cognome: "Rossi"};
var personaProxata = new Proxy(persona, handler);

Abbiamo creato un oggetto persona e lo abbiamo passato insieme all'handler al costruttore della classe Proxy. D'ora in poi ogni accesso alle proprietà dell'oggetto personaProxata avrà effetto sull'oggetto persona e verrà intercettato e loggato sulla console:

var nome = personaProxata.nome;
 //console: Lettura di nome
 personaProxata.nome = "Marco";
 //console: Assegnamento di Marco a nome
 console.log(persona.nome);
 //console: Marco

Naturalmente
questo è un semplice esempio per introdurre i concetti di base
per l'utilizzo della classe Proxy. È possibile utilizzare
altre trap per definire manipolazioni avanzate dell'oggetto
target. Oltre a get() e set(), infatti, possiamo
sfruttare le seguenti trap che intercettano i corrispondenti
metodi dell'oggetto target:

• getPrototypeOf()
• setPrototypeOf()
• isExtensible()
• preventExtensions()
• getOwnPropertyDescriptor()
• defineProperty()
• has()
• deleteProperty()
• ownKeys()
• apply()
• construct()

Validazione con i proxy

Abbiamo visto i meccanismi di base dell'utilizzo della classe Proxy con un esempio molto semplice e didattico. Nella pratica i
contesti di applicazione sono diversi e possono contribuire a scrivere
codice meno invasivo e con una elevata separazione delle responsabilità.
Proviamo a dare qualche indicazione fornendo qualche esempio più pratico.

Supponiamo di voler gestire la validazione dell'assegnamento di valori ad
un oggetto senza modificare però l'oggetto in questione. Ad esempio,
vogliamo che non sia possibile assegnare una stringa vuota o una stringa
che contenga dei numeri al nome e cognome di un oggetto che rappresenti una
persona. Possiamo allora definire un handler come il seguente:

var validatore = {
    set(target, propertyName, value) {
       if (propertyName == "nome" || propertyName == "cognome") {
          if (value == "") throw new Error("Non è possibile assegnare una stringa vuota");
          let hasNumberRegExp = /\d/;
          if (hasNumberRegExp.test(value)) throw new Error("La stringa non può contenere numeri");
       }
       target[propertyName] = value;
    }
 };

Come possiamo vedere, abbiamo definito il metodo set() all'interno
del quale abbiamo intercettato gli accessi alle proprietà nome e cognome. Nel caso in cui il valore che si tenta di assegnare a
queste proprietà è una stringa vuota o contiene un valore numerico, generiamo
un'eccezione con uno specifico messaggio. Se non si intercetta una
situazione non valida, viene effettuato l'assegnamento sulla proprietà
dell'oggetto target.

Vediamo come implementare e testare il proxy:

var personaConValidazione = new Proxy({nome: "Mario", cognome: "Rossi"}, validatore);
personaConValidazione.nome = "";
//Uncaught Error: Non è possibile assegnare una stringa vuota
personaConValidazione.nome = "Mario1"
//Uncaught Error: La stringa non può contenere numeri

In questo modo abbiamo isolato la logica di validazione in un componente
esterno all'oggetto originario migliorando la manutenibilità del codice. Ad
esempio, se i criteri di validazione per un oggetto cambiano da un contesto
all'altro, non abbiamo bisogno di scrivere oggetti diversi o setter
complessi per applicare il criterio corretto. È sufficiente scrivere
handler diversi in base al contesto ed utilizzarli per creare il proxy opportuno.

Data binding

Un altro ambito in cui possiamo utilizzare la classe Proxy è
nell'implementazione del data binding, cioè nel meccanismo che
lega le proprietà di due oggetti in modo che le modifiche si propaghino da
uno all'altro. Nel contesto del data binding si parla di un
oggetto che fornisce dati (data source object) e di un oggetto che
li riceve (data target object). L'esempio tipico di applicazione
del data binding è quello che associa una proprietà di un oggetto
con un elemento dell'interfaccia grafica, come ad esempio una casella di
testo. Vediamo come sfruttare la classe Proxy per implementare il
meccanismo di data binding.

Definiamo una classe Binder con un metodo bindTo() come
mostrato di seguito:

class Binder {
    bindTo(dataSourceObj, dataSourceProperty, dataTargetObj, dataTargetProperty) {
       var bindHandler = {
          set: function(target, property, newValue) {
             if (property == dataSourceProperty) {
                target[dataSourceProperty] = newValue;
                dataTargetObj[dataTargetProperty] = newValue;
             }
          }
       };
       return new Proxy(dataSourceObj, bindHandler);
    }
 }

Il metodo
bindTo() definisce una trap che cattura gli accessi in
scrittura al data source object, in modo tale che ogni
modifica alla proprietà specificata dal parametro
dataSourceProperty aggiorni la proprietà associata del
data target object. Il metodo bindTo() restituisce il
proxy creato a partire dal data source object. Possiamo quindi
usare la classe Binder come nel seguente esempio:

var persona = {
    nome: "Mario",
    cognome: "Rossi"
 };
 var txtNome = document.getElementById("txtNome");
 var binder = new Binder();
 var personaConBinding = binder.bindTo(persona, "nome", txtNome, "value");
 setTimeout(function() {
    personaConBinding.nome = "Marco";
 }, 5000);

Abbiamo creato il proxy dell'oggetto persona utilizzando il metodo bindTo() della classe Binder. Nella chiamata al metodo bindTo() abbiamo specificato che vogliamo mettere in relazione la
proprietà nome dell'oggetto persona con la proprietà value dell'elemento txtNome. In questo modo, ogni modifica
alla proprietà nome dell'oggetto personaConBinding si
rifletterà automaticamente sia sull'oggetto originario persona,
sia sulla casella di testo.

I due esempi di applicazione concreta che abbiamo riportato danno un'idea
delle possibili utilizzi della classe Proxy nello sviluppo di
applicazioni di una certa complessità.