back to top

Lโ€™oggetto this di Javascript

Una parola molto importante nella programmazione Javascript รจ this, grazie a questo particolare identificatore, infatti, รจ possibile far riferimento "a se stesso" (in inglese "this" vuol dire letteralmente "questo").

Lโ€™utilizzo di this in Javascript differisce rispetto ad altri linguaggi orientati agli oggetti. Come detto, infatti, Javascript non conosce il concetto di classe e pertanto non รจ sempre facile identificare lโ€™oggetto al quale this si riferisce. Il problema principale, quindi, รจ identificare il contesto al quale this fa riferimento.

Pubblicitร 

Utilizzare this inline

Lโ€™utilizzo piรน comune di this รจ inline allโ€™interno cioรจ di un tag HTML; vediamo un esempio:

<span onclick="alert(this.tagName.toLowerCase());">clicca qui</span>

Nel nostro esempio, cliccando si aprirร  un alert con allโ€™interno la dicitura "span". Il contesto di this, infatti, รจ rappresentato dal tag a cui รจ applicato lโ€™evento, quindi, nel nostro esempio, il tag <span>.

Utilizzare this allโ€™interno di una funzione

Lโ€™oggetto this, perรฒ, puรฒ essere utilizzato anche allโ€™interno di una funzione, ma in questo caso le cose si fanno piรน complesse. facciamo un esempio:

function faccioQualcosa() {
  alert(this.style.color);    
}

Richiamando la funzione senza associarla ad alcun oggetto:

<script>faccioQualcosa();</script>

Questa produrrebbe un errore! In mancanza di unโ€™associazione esplicita con un oggetto, infatti, il this si presume riferito al generico oggetto window e, pertanto, nel caso concreto finirebbe col produrre un errore.

Vediamo un altro esempio:

document.getElementById('mioDiv').onclick = faccioQualcosa();

In questo caso la funzione, invece, produrrebbe il risultato atteso, cioรจ mostrerebbe โ€“ allโ€™atto del click โ€“ un alert con il valore della proprietร  CSS "color" settata nellโ€™attributo "style" dellโ€™elemento selezionato.

In questo caso, infatti, il contesto di this sarebbe lo specifico oggetto relativo allโ€™elemento selezionato. Il contesto, infatti, sarebbe:

document.getElementById('mioDiv')

e non piรน il generigo oggetto window.

Utilizzare this allโ€™interno di un oggetto

Un altro ruolo importante di this รจ allโ€™interno di un oggetto. Nellโ€™ottica di una programmazione orientata agli oggetti, infatti, lโ€™oggetto this assume un significato particolare. Dentro ad un oggetto, infatti, this fa riferimento allโ€™oggetto stesso.

Pubblicitร 
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).