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