Lo scope chain e le closures

Parlando di scope di una variabile in javascript si nota che è come le scatole cinesi: dall’ interno si possono utilizzare le variabili via via più esterne. Questo è il concetto di scope chain.
Per qualunque esigenza, è possibile “isolare” l’ esecuzione di una funzione in modo da avere il controllo sullo scope che gli si vuole dare: è il concetto di closure.

Metodi di oggetti come callback

Si pensi allo scope di un metodo di un oggetto: la proprietà this, usata nei metodi dell’ oggetto, dovrebbe riferirsi all’ oggetto stesso; ma se il metodo viene “staccato” dall’ oggetto ed “innestato” su una funzione di callback di un evento, la proprietà this si riferirà all’ oggetto che lancerà quell’ evento.
Quindi con this abbiamo una alternativa: o disponiamo dell’ oggetto, o disponiamo dell’ elemento DOM legato all’ evento.
Per disporre di entrambi si ricorre ad uno scope mixing.

<script type="text/javascript">

var listener = function() {
  this.message = "Hai cliccato su di me";

  this.onclick = function() {
    var listener = this;      // OSSERVARE QUESTA ASSEGNAZIONE: grazie ad essa potremo riferirci ancora all' oggetto, usando un alias per "this"
    return function() {
      alert("MESSAGGIO: " + listener.message + "\nTAGNAME: " + this.tagName);
    }
  }
}

var clickListener = new listener();

window.onload = function() {
  document.getElementsByTagName("button")[0].onclick = clickListener.onclick();
  document.getElementsByTagName("a")[0].onclick = clickListener.onclick();
  document.getElementsByTagName("img")[0].onclick = clickListener.onclick();
}
</script>
<button>Bottone 1</button>
<a href="#">Link 1</a>
<img src="http://html.it/common/img/logo2.gif" alt="" />

Il metodo onclick della classe listener realizza una closure: assegnandolo alla funzione di callback onclick avremo che un metodo di una classe manterrà un “collegamento” (cioè un binding) tra lo scope della classe e lo scope dell’ elemento DOM che lancia l’ evento; ovvero una chiusura tra i due ambiti.
Questa è una spiegazione semplificata dell’ argomento delle chiusure nei linguaggi informatici, che riguarda anche le garbage collections.

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...