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.

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).