Ti sarai accorto che non è del tutto lineare capire come funziona “this” in JavaScript ed è per questo che ho scritto questo articolo, dove scoprirlo assieme.
Oltre a capire come funziona “this” in JavaScript, cosa non del tutto lineare, può anche capitare di incappare in alcuni suoi comportamenti strani se non si è del tutto familiari.
“this” può creare non poca confusione anche a livello di semantica e no, non mi rifaccio solo a quella tecnichese, ma anche a quella della lingua parlata da noi esseri umani. Sto parlando del significato vero e proprio come parola chiave, oltre al suo contesto d’utilizzo.
Questo articolo legato alla parolina magica “this” in JavaScript sarà molto lungo, perciò preparati a un sacco di noia rispetto agli altri articoli, io ti avviso in anticipo 😀
Ciao mi chiamo Lorenzo Neri e sono un informatico: realizzo contenuti per aiutare le persone a padroneggiare l’arte del nuovo millennio, ovvero l’informatica!
ALLARME SPOILER! Prima di proseguire ti voglio avvisare che tutto ciò che troverai a seguito di questo articolo è legato alla versione 5.1 di ECMAScript, di cui voglio lasciarti le referenze con un click qui!
“this” come keyword
“this” in JavaScript come keyword, ovvero come parola chiave valuta il valore del ThisBinding in base al contesto di esecuzione.
Fermiamoci un momento: COSA?
Quello che ho scritto poco fa va assolutamente chiarito meglio, troppo tecnichese in quelle parole. ThisBinding è un elemento dell’interprete JavaScript che serve a valutare il codice stesso.
Te lo devi immaginare come un registro speciale della CPU che mantiene in memoria la referenza ad un oggetto.
Ok, il fattaccio da chiarire adesso è: contesto di cosa? Quale oggetto?
Questo è da suddividere in tre casi differenti a cui ci possiamo trovare davanti
1. Contesto globale
Per “globale” intendiamo al livello più alto, quindi per fare un contro esempio non a livello di funzione, ma a livello di tag “script”. Per intenderci:
<script>
alert("Io sono valutato a livello di contesto globale");
function informatico(){
alert("Io invece NO!");
}
</script>
Per farti un altro esempio, “this” a livello globale, fa sì che sia “collegato” tramite ThisBinding all’oggetto window.
2. All’interno del codice eval()
Che intendo dire? Hai presente quando utilizzi la funzione “eval()”?
Ecco, quando la chiami direttamente, il ThisBinding rimane inalterato, quindi il suo contesto è in base all’utilizzo corrente, che sia globale o ad esempio all’interno di una funzione.
Se invece non è chiamata direttamente, allora ThisBinding sarà impostato come globale.
Un esempio?
// Chiamata diretta
alert((0, eval));
// Chiamata indiretta
var valore 0 eval;
3. All’interno delle funzioni
Adesso vediamo una piccola grande differenza di come funziona “this” in JavaScript rispetto ai due casi precedenti.
Ammettiamo di invocare una funzione tramite un oggetto, per esempio come segue:
// Ad esempio così:
oggetto.metodoOggetto();
// Oppure così:
oggetto["metodoOggetto"]();
ThisBinding in questo caso non sarà più a livello globale, bensì a livello locale, quindi di funzione.
O meglio dire, di metodo poiché le stiamo invocando tramite oggetto.
