Dopo aver appreso le basi di jQuery e essermi stupito di quanto sia possibile fare con pochissime righe di codice, ho cominciato ad utilizzarlo sfruttando svariati plugin.
Tuttavia, sono rimasto a lungo confuso riguardo il concetto della parola chiave ‘this‘.
In parole povere, la parola chiave ‘this‘ può far riferimento a due contesti differenti:
- un elemento del DOM
- un oggetto jQuery
In circostanze normali, la parola chiave this si riferisce a un elemento DOM; più comunemente viene utilizzato all’interno di una funzione di callback, ad esempio durante l’associazione a un evento, oppure durante un’iterazione di elementi.
Numerose funzioni all’interno di jQuery sono in grado di accettare la funzione di callback; ad esempio, le funzioni per il fading (fadeIn, fadeOut).
Dopo che la porzione di DOM selezionata ha completato il fading, viene innescata la funzione di callback, e a questo punto la keyword this fa riferimento all’elemento del DOM selezionato.
Di seguito diversi esempi di utilizzo del this come riferimento ad elementi del DOM:
//Binding di un evento
$('a').click(function() {
//this si riferisce all'ancora (elemento DOM)
alert("this.href = '" + this.href + "'");
})
//Iterating over elements from a jQuery selection
$('a').each(function() {
//this si riferisce all'ancora (elemento DOM) corrente (each)
alert("this.href = '" + this.href + "'");
});
//Fading DOM elements from a jQuery selection
$('a').fadeOut('slow', function() {
//this si riferisce all'ancora (elemento DOM)
alert("this.href = '" + this.href + "'");
});
Come si può vedere, nella maggior parte degli scenari che coinvolgono la parola chiave this, si riferisce ad un elemento DOM.
Tuttavia, l’area principale in cui è necessario fare attenzione con il this è quando si scrive un plugin jQuery.
La parola chiave this utilizzata all’interno di un plugin jQuery si riferisce all’oggetto jQuery utilizzato dal selettore $ e su cui si applica il plugin.
Di seguito un esempio di utilizzo della parola chiave this in un plugin:
// Set _blank target for anchors point to outside domain URL
jQuery.fn.SetBlankTarget = function () {
// at this point 'this' is a jQuery object
return this.each(function () {
// now we are inside of a jQuery function so the DOM element is the context
// at this point 'this' is a DOM element.
if (this.host != window.location.host) {
//at this point 'this' is a DOM element
//$(this) is a jQuery object
$(this).attr('target', '_blank');
}
});
};
