paitadesignblog

HTML, CSS e tutto il resto

JavaScript e ‘this’: capire come usarla!

La parola chiave this. Una delle più potenti e importanti parole chiave in JavaScript è la parola this: purtroppo se non la si conosce bene e non si sa esattamente come funziona, è difficile da usare e da capire.

Ecco di seguito la traduzione dell’articolo The this keyword

Chi è il proprietario di ‘this’?

La domanda alla quale risponderemo in questo articolo è: a cosa si riferisce la parola this in
una funzione generica doSomething()?

Con questa funzione di esempio, vogliamo semplicemente cambiare lo stile (il colore) dell’elemento a cui il ‘this’ si riferisce. Eccola:

Iniziamo col dire che in JavaScript this si riferisce sempre al proprietario della funzione che stiamo eseguendo, l’oggetto del quale la funzione rappresenta un metodo.
Quando definiamo la funzione doSomething() in una pagina, o meglio, nello scoping globale, il suo proprietario è la pagina, cioè l’oggetto window, l’oggetto globale di JavaScript.
Una proprietà onClick, invece, è una proprietà del elemento HTML a cui appartiene.

Questa “proprietà” è il risultato dell’approccio orientato agli oggetti di JavaScript.

Se eseguiamo la funzione così com’è, riferendosi essa sempre all’oggetto window, cerca di cambiare la proprietà style.color della finestra, che non avendola, produrrà un errore.

Come facciamo? Possiamo…

…Copiare la funzione nella proprietà dell’elemento

Per fare in modo che la funzione vada a buon fine, dobbiamo fare in modo che essa sia ‘posseduta’ dal corretto elemento HTML.
In altre parole, dobbiamo copiare la funzione nella proprietà onClick dell’elemento, cosa di cui si prende cura la registrazione tradizionale dell’evento.

La funzione viene completamente copiata nella proprietà onclick, e adesso diventa un metodo.
Quindi, se il gestore dell’evento (event handler) viene eseguito, esso fa riferimento all’elemento HTML e il suo colore cambia.

Ecco sotto lo schema:

Il punto cruciale è che possiamo copiare la funzione in diversi gestori di evento, gli ‘event handlers’ di elementi diversi, e ogni volta il ‘this’ farà riferimento all’elemento HTML corretto:

Attenzione ai corretti riferimenti!

Tuttavia, se si utilizza la registrazione dell’evento in linea, così:

non si copia la funzione! Invece, si fa riferimento ad essa, e la differenza è fondamentale. La proprietà “onclick” non contiene la funzione reale, ma solo una chiamata di funzione, come se facessi così:

Come se si dicesse: “Vai a doSomething() ed eseguila.”
Quando JavaScript arriva a doSomething(), la parola chiave ‘this’, ancora una volta si riferisce all’oggetto ‘window’ globale e la funzione restituisce messaggi di errore.

In sintesi, ecco cosa succede:

Quale è la differenza?

Se si desidera utilizzare “this” per accedere all’elemento HTML che sta gestendo l’evento, è necessario assicurarsi che la parola chiave “this” venga effettivamente scritta nella proprietà “onclick”. Solo in questo caso, ci si riferisce all’elemento HTML a cui il gestore di eventi è registrato.
Quindi, se scriviamo:

otteniamo che:

Come si può vedere, la parola chiave “this” è presente nel metodo onclick. Pertanto si riferisce all’elemento HTML. Ma se facciamo così:

otteniamo:

In questo modo, abbiamo creato solo un riferimento alla funzione “doSomething()”. La parola chiave “this” non è presente nel metodo “onclick”, perciò non si riferisce all’elemento HTML.

Esempi su come “copiare”!

La parola “this” è scritto nel metodo onclick nei seguenti casi:

JavaScript

HTML

Esempi su come “riferirsi”!

Nei seguenti casi, “this” si riferisce all’oggetto “window”:

JavaScript

HTML

Notate la presenza di “attachEvent()”. Lo svantaggio principale del modello di registrazione dell’evento Microsoft è che “attachEvent()” crea un riferimento alla funzione, non la non copia. Quindi a volte è impossibile sapere quale elemento HTML gestisce di fatto l’evento.

Come si combinano i due esempi?

Quando si utilizza la registrazione dell’evento in linea, è possibile anche inviare “this” alla “funzione”, in modo che si possa ancora usarlo:

Ecco cosa ho usato per questo articolo: