15 giugno 2021

Il tipo Reference

Questo articolo tratta un argomento avanzato, utile per capire meglio alcuni casi limite.

Non Ã¨ di fondamentale importanza. Molti sviluppatori esperti vivono bene senza esserne a conoscenza. Continua la lettura se sei interessato a sapere come funzionano le cose internamente.

Unâ€™invocazione di un metodo valutata dinamicamente puÃ² perdere il this.

Ad esempio:

let user = {
  name: "John",
  hi() { alert(this.name); },
  bye() { alert("Bye"); }
};

user.hi(); // funziona

// ora invochiamo user.hi o user.bye in base al nome
(user.name == "John" ? user.hi : user.bye)(); // Errore!

Nellâ€™ultima riga abbiamo un operatore condizionale che sceglie tra user.hi o user.bye. In questo caso il risultato Ã¨ user.hi.

Successivamente il metodo viene invocato immediatamente con le parentesi (). Ma non funziona correttamente!

Come potete vedere, lâ€™invocazione genera un errore, perchÃ© il valore di "this" allâ€™interno della chiamata diventa undefined.

Questo invece funziona (object punto metodo):

user.hi();

Questo no (valutazione del metodo):

(user.name == "John" ? user.hi : user.bye)(); // Errore!

PerchÃ©? Se vogliamo capire il motivo, dobbiamo addentrarci nei dettagli del funzionamento della chiamata obj.method().

Il tipo Reference spiegato

Guardando da piÃ¹ vicino, possiamo notare due operazioni nellâ€™istruzione obj.method():

Primo, il punto '.' recupera la proprietÃ obj.method.
Successivamente le parentesi () la eseguono.

Quindi, come vengono passate le informazioni riguardo al this dalla prima alla seconda parte?

Se spostiamo queste istruzioni in righe separate, allora this verrÃ sicuramente perso:

let user = {
  name: "John",
  hi() { alert(this.name); }
}

// dividiamo l'accesso e l'invocazione in due righe
let hi = user.hi;
hi(); // Errore, perchÃ© this Ã¨ undefined

Qui hi = user.hi assegna la funzione alla variabile, e nellâ€™ultima riga Ã¨ completamente autonoma, quindi non si ha alcun this.

Per rendere lâ€™invocazione user.hi() funzionante, JavaScript applica un trucco â€“ il punto '.' non ritorna una funzione, ma piuttosto un valore del tipo speciale Reference.

Il tipo Reference Ã¨ un â€œtipo descritto dalla specificaâ€. Non possiamo utilizzarlo esplicitamente, ma viene utilizzato internamente dal linguaggio.

Il valore del tipo Reference Ã¨ una combinazione di tre valori (base, name, strict), dove:

base Ã¨ lâ€™oggetto.
name Ã¨ il nome della proprietÃ .
strict vale true se use strict Ã¨ attivo.

Il risultato dellâ€™accesso alla proprietÃ user.hi non Ã¨ una funzione, ma un valore di tipo Reference. Per user.hi in strict mode vale:

          // valore di tipo Reference
(user, "hi", true)
        

Quando le parentesi () vengono invocate in un tipo Reference, queste ricevono tutte le informazioni riguardo lâ€™oggetto ed il metodo, e possono quindi impostare correttamente il valore di this (=user in questo caso).

Il tipo Reference Ã¨ uno speciale tipo â€œintermedioâ€ utilizzato internamente, con lo scopo di passare le informazioni dal punto . allâ€™invocazione con le parentesi ().

Qualsiasi altra operazione come un assegnazione hi = user.hi scarta completamente il tipo Reference, accede al valore user.hi (una funzione) e lo ritorna. Quindi qualsiasi ulteriore operazione â€œperderÃ â€ this.

Quindi, come risultato, il valore di this viene passato correttamente solo se la funzione viene invocata direttamente utilizzando il punto obj.method() o la sintassi con le parentesi quadre obj['method']() (in questo caso si equivalgono). Esistono diversi modi per evitare questo problema, come func.bind().

Riepilogo

Il tipo Reference Ã¨ un tipo interno del linguaggio.

La lettura di una proprietÃ , con il punto . in obj.method() non ritorna esattamente il valore della proprietÃ , ma uno speciale â€œtipo referenceâ€ che memorizza sia il valore della proprietÃ che lâ€™oggetto a cui accedere.

Questo accade per consentire che la successiva invocazione con () imposti correttamente il this.

Per tutte le altre operazioni, il tipo reference diventa automaticamente il valore della proprietÃ (una funzione nel nostro caso).

Il meccanismo descritto Ã¨ nascosto ai nostri occhi. Ha importanza solo in alcuni casi, ad esempio quando un metodo viene ottenuto dinamicamente dallâ€™oggetto, utilizzando unâ€™espressione.

Esercizi

Controllo di sintassi

Qualâ€™Ã¨ il risultato di questo codice?

          let user = {
  name: "John",
  go: function() { alert(this.name) }
}

(user.go)()
        

P.S. Câ€™Ã¨ una trappola :)

Errore!

Provatelo:

let user = {
  name: "John",
  go: function() { alert(this.name) }
}

(user.go)() // error!

La maggior parte dei browser non vi darÃ informazioni necessarie per capire cosa Ã¨ andato storto.

Lâ€™errore viene causato dalla mancanza di un punto e virgola dopo user = {...}.

JavaScript non inserisce automaticamente un punto e virgola prima di (user.go)(), quindi leggerÃ il codice in questo modo:

let user = { go:... }(user.go)()

Possiamo anche vedere questa come una comune espressione, Ã¨ sintatticamente una chiamata allâ€™oggetto { go: ... } come una funzione con argomento (user.go). E questo avviene nella stessa riga di let user, quindi lâ€™oggetto user non Ã¨ ancora stato definito, quindi câ€™Ã¨ un errore.

Se inseriamo un punto e virgola, tutto funziona correttamente:

let user = {
  name: "John",
  go: function() { alert(this.name) }
};

(user.go)() // John

Da notare che le parentesi su (user.go) non fanno nulla. Solitamente servono ad organizzare lâ€™ordine delle operazioni, in questo caso Ã¨ presente un . che verrebbe comunque eseguito per primo, non hanno quindi alcun effetto. Lâ€™unico errore stava nel punto e virgola.

Spiegate il valore di "this"

Nel codice sotto vogliamo chiamare il metodo user.go() volte di fila.

let obj, method;

obj = {
  go: function() { alert(this); }
};

obj.go();               // (1) [object Object]

(obj.go)();             // (2) [object Object]

(method = obj.go)();    // (3) undefined

(obj.go || obj.stop)(); // (4) undefined

Vediamo la spiegazione.

Questa Ã¨ una normale chiamata ad un metodo dellâ€™oggetto.
Stessa cosa, le parentesi non cambiano lâ€™ordine delle operazioni, il punto viene eseguito per primo in ogni caso.
Qui abbiamo una chiamata piÃ¹ complessa (expression).method(). La chiamata viene interpretata come fosse divisa in due righe:
```
f = obj.go; // calculate the expression
f();        // call what we have
```
Qui f() viene eseguita come una funzione, senza this.
Molto simile a (3), alla sinistra del punto . abbiamo un espressione.

Per spiegare il comportamento di (3) e (4) dobbiamo ricordare che la proprietÃ di accesso (il punto o le parentesi quadre) ritornano un valore di tipo riferimento.

Qualsiasi operazione tranne la chiamata ad un metodo (come lâ€™assegnazione = o ||) trasforma questo riferimento in un valore oridnario, che non porta piÃ¹ le informazioni necessarie per impostare this.

Mappa del tutorial

Commenti

leggi questo prima di lasciare un commentoâ€¦