Categorie
Javascript Programmazione

{JS} new Proxy()

L’oggetto Proxy

L’oggetto Proxy consente di gestire il comportamento predefinito di altri oggetti.
Questo è possibile mediante la creazione di un istanza dell’ oggetto-da-gestire creata tramite lo stesso oggetto-proxy.

Abbiamo quindi bisogno di tre elementi:

oggetto-da-gestireoggetto a cui bisogna modificare il comportamento predefinito
handlerè un oggetto detto “gestore” che si occuperà di modificare il comportamento
istanza dell’oggetto-da-gestireistanza dell’oggetto principale creata mediante il costruttore Proxy

Oggetto da gestire

L’oggetto da gestire è un semplice oggetto che subirà la modifica del comportameto

var persona = {nome: "Mario", cognome: "Rossi"};

Handler

Un handler non è altro che un ulteriore oggetto creato per occuparsi della gestione dell’accesso all’oggetto principale.
Particolarità dell’handler sono le trap, trappole, che intercettano, le diverse modalità di accesso all’oggetto-da-gestire.

Trap

get()gestisce proprietà in lettura
set()gestisce proprietà in scrittura

Le trap, in realtà, sono due metodi, get() e set(), contenuti all’interno dell’handler oggetto.
get() e set() si occupano di gestire l’accesso in-lettura e in-scrittura delle proprietà dell’oggetto principale.

var handler = {
    get(target, nomedellaProprieta) {
       document.write("Lettura di " + nomedellaProprieta);
       return target.nomedellaProprieta;
    },
    set(target, nomedellaProprieta, value) {
       document.write("Assegnamento di " + value + " a " + nomedellaProprieta);
       target.nomedellaProprieta = value;
    }
 };

E’ necessario creare un handler-gestore personale per ogni oggetto da gestire.

target“, parola-chiave, fa riferimento all’oggetto a cui sarà associato l’handler;
nomedellaProprieta” è il nome della proprietà di cui bisogna gestire l’accesso in lettura ed in scrittura;
value“, in ultimo, fa riferimento al valore passato quando richiamiamo la proprietà in modalità scrittura.

Riprendendo l’oggetto più sopra “persona”

var persona = {nome: "Mario", cognome: "Rossi"};

l’handler andrebbe riscritto cosi:

var handlerPerona = {
  get(target, nome) {
       document.write("Lettura di " + nome);
       return target.nome;
    },
  set(target, nome, value) {
       document.write("Assegnamento di " + value + " a " + nome);
       target.nome = value;
    }
 };

Di seguito altre trap disponibili:

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

Istanza

Una volta definito l’handler, possiamo creare un proxy per un oggetto. Per farlo creeremo una nuova istanza dell’oggetto-da-gestire mediante il costruttore Proxy.

var personaProxata = new Proxy(persona, handlerPersona);

L’oggetto new Proxy() accetta due parametri: l’oggetto-da-gestire e l’oggetto-handler-dedicato.

Utilizzo

Abbiamo creato un oggetto persona e lo abbiamo passato insieme al suo handler al costruttore della classe Proxy creandone una nuova oggetto/istanza.
D’ora in poi ogni accesso alle proprietà dell’oggetto personaProxata sarà gestito dall’handler.

var nome = personaProxata.nome;
 //Risultato "Lettura di nome"
 personaProxata.nome = "Marco";
 //Risultato "Assegnamento di Marco a nome"

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *