jQuery ‘this’

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');
        }
    });
};