Uno degli aspetti più confusi di jQuery è come assegna l’ambito durante il callback. Deve essere parecchio confuso perché l’argomento genera un sacco di domande sulla mailing list di jQuery. Peccato, davvero, perché jQuery imposta l’ambito al fine di semplificare il nostro codice e non per renderlo più confuso.
Ecco alcune indicazioni che possono aiutare a ricordare di cosa si tratta la parola this.

this è un elemento DOM

Quando this è un elemento DOM? La risposta breve è – di solito. Lo scripting con jQuery molto spesso comporta l’uso di funzioni di callback. Nella gestione di un evento, o iterando un insieme di nodi, nell’animare un’immagine, o nell’applicazione di un filtro dinamico, le funzioni di richiamate (o callback) sono utilizzate per invocare il codice personalizzato al momento opportuno. Per rendere le cose facili per te, jQuery imposta l’ambito della funzione di callback all’elemento che costituisce l’oggetto della richiamata. Per esempio, quando si vuole gestire un evento clic del mouse per un elemento, si associa una funzione per gestire l’evento in questo modo:
$('#myButton').bind('click', function() {
   // il nostro codice per gestire l'evento
   // si trova qui, nella funzione di callback
});
Quando un utente fa clic sull’elemento ‘myButton’, jQuery invoca la funzione di callback che è stato passato al metodo bind. Ma quando s’invoca nostro callback si definisce l’ambito corrente all’elemento DOM che ha avviato l’evento, in questo caso l’elemento ‘myButton’. jQuery lo fa per comodità. L’oggetto che ha più probabilità di essere richiamato dall’evento in callback è l’elemento che ha generato l’evento. E quale modo più facile per avere accesso a esso utilizzando la parola chiave this? Così all’interno della funzione di callback si può presumere che this è l’elemento rilevante DOM:
$('#myButton').bind('click', function() {
   // 'this' è  l'elemento DOM che ha attivato l'evento
   alert(this.id == 'myButton');
});
Diamo un’occhiata a quanto spesso this è un elemento DOM quando si utilizza jQuery. Abbiamo appena visto il caso di un gestore di eventi, qui sono alcuni altri:
Elementi d’iterazione con il metodo each:
$('div').each(function() {
   // 'this' è  un elemento DOM
   alert(this.tagName.toLowerCase() == 'div');
});
Usando il metodo load di AJAX:
$('#myDiv').load('myUrl.php', function() {
   // 'this' è  un elemento DOM
   alert(this.id == 'myDiv');
});
Usando animazione:
$('#myDiv').fadeOut('slow', function() {
   // 'this' è  un elemento DOM
   alert(this.id == 'myDiv');
});
Utilizzando filtri di selezione:
var set = $('div').filter(function() {
   // 'this' è  l'elemento DOM
   alert(this.tagName.toLowerCase() == 'div');
   return true;
});
Usando il costruttore “document ready”:
$(document).ready(function() {
   // 'this' è  l'oggetto del documento
   alert(this === document);
});
Usando eventi globali AJAX:

$().ajaxStart(function() {
   // 'this' è  l'oggetto del documento
   alert(this === document);
});
Quest’ultimo potrebbe confondere. Perché this è l’oggetto del documento nella richiamata ajaxStart? I metodi che avvolgono le funzioni di callback per gli eventi globali AJAX sono metodi vincolanti. Questi si legano al gestore di eventi di un elemento DOM. Quando l’evento avviene, il gestore è chiamato, nel contesto dell’elemento DOM. E quando si utilizza la funzione dollaro con jQuery senza argomenti, utilizza implicitamente l’oggetto documento come l’elemento selezionato. Quindi un altro modo di scrivere lo snippet del codice precedente è il seguente:
$(document).bind('ajaxStart', function() {
   alert(this == document);
});
Ora probabilmente si può vedere come this è determinato da come si chiamano i metodi AJAX vincolanti:
$(window).ajaxStart(function() {
   alert(this == window);
});
$('#busyIndicator').ajaxStop(function() {
   alert(this.id == 'busyIndicator');
});
$('div.error').ajaxError(function() {
   alert(this.tagName.toLowerCase() == 'div');
});
this è un oggetto
Come menzionato prima, quando si cicla degli elementi con l’iteratore each di jQuery, this è sempre un elemento DOM. Tecnicamente, è più esatto dire che all’interno di un’iterazione each, this è il soggetto del ciclo nell’iterazione corrente. Questa distinzione è importante perché il metodo each di jQuery può essere utilizzato per scorrere su qualsiasi tipo di oggetti array e non solo Liste di nodi.
var arr = ['a','b','c'];
$.each(arr, function(index, obj) {
   // 'this' è  l'oggetto dell'iterazione corrente
   alert(this.constructor == String);
   alert(arr[index] == this);
   alert(this == obj);
});
// o utilizzando una sintassi diversa
// ma funzionalmente equivalenti:
$(arr).each(function(index, obj) {
   // 'this' è  l'oggetto dell'iterazione corrente
   alert(this.constructor == String);
   alert(arr[index] == this);
   alert(this == obj);
});
this è un oggetto jQuery
Prendete nota autori dei plugin! Se avete scritto un plugin le cui funzionalità possono essere applicate a molti elementi, allora molto probabilmente l’avete fatto utilizzando l’estensione standard fn:
$.fn.myPlugin = function() {
   // il vostro codice del plugin va qui!
});
All’interno della vostra funzione del plugin this è l’oggetto jQuery. E se si rispettano le linee guida del Plugin Authoring, il metodo del plugin restituisce sempre this al fine di mantenere Chainability.
$.fn.myPlugin = function() {
   // 'this' è  l'oggetto jQuery
   alert("jQuery version: " + this.jquery);
   return this;
});
Tipicamente, un plugin funziona su ogni elemento DOM che è stato selezionato dall’oggetto jQuery. In poche parole, ciò significa usare il metodo each all’interno di ogni plugin. Troverete spesso questa tecnica implementata nel seguente modo:
$.fn.myPlugin = function() {
   // 'this' è  l'oggetto jQuery
   alert("jQuery version: " + this.jquery);
   return this.each(function() {
  // 'this' è  ora l'elemento DOM
  // come soggetto dell'iterazione 'each'
  alert("current element: " + this.tagName);
   });
});
this è un oggetto AJAX per impostazioni
Ho accennato prima sul metodo load di jQuery e le funzioni di callback per gli eventi globali AJAX. Quelle richiamate sono legate specificamente a un elemento del DOM o a un insieme di elementi. Il resto dei metodi AJAX, $.get, $.post, $.ajax, ecc, operano al di fuori del contesto di un insieme specifico dell’elemento. Ma questi metodi possono essere passati con le funzioni di callback per cui è importante capire che this è in quelle richiamate. Fortunatamente, tutto quello che si deve ricordare è che per ciascuna delle funzioni di callback locale AJAX, beforeSend, success, complete, e error, this è sempre uguale alle impostazioni dell’oggetto utilizzato per la chiamata AJAX.
$.get('myUrl', function() {
   // 'this' è  l'oggetto  AJAX per le
   // impostazioni usato per ottenere la chiamata
   alert(this.url == 'myUrl');
});
$.ajax({
   type: 'POST',
   url: 'myUrl',
   timeout: 5000,
   beforeSend: function() {
  alert(this.url == 'myUrl');
   },
   error: function() {
  alert(this.timeout == 5000);
   },
   success: function() {
  alert(this.type == 'POST');
   },
   complete: function() {
  alert(this.async == true);
   }
});
Conversione da this a $this
Quando this è un elemento DOM che spesso è nel contesto del codice che ha bisogno di accedere o manipolare in qualche modo. Quindi, come possiamo utilizzare la potenza delle API jQuery quando this è un elemento DOM? Questo, naturalmente, è qualcosa che eccelle in jQuery. Basta trasformare this in $this:
$('div').each(function() {
   // 'this' è  un elemento DOM
   // avvolgere 'this' in un oggetto jQuery
   var $this = $(this);
   // ora abbiamo l'API jQuery a nostra disposizione
   var title = $this.attr("title");
   if (title != null) {
  $this.prepend("<h2>" + title + "</h2>");
   }
});
Quando siete confusi su cosa è this all’interno di un blocco di un dato codice, chiedetevi: “Che cosa ha più senso qui?” Molto spesso, la risposta a questa domanda è uguale a this.
Similari
La bellezza del Metodo each() di jQuery
16% JQuery
La libreria jQuery fornisce un metodo, each(), che cicla ogni elemento dell’oggetto jQuery di destinazione. [expand expanded=”true” title=”Ciclare tutti i link” excerpt=”⤽” swapexcerpt=”” startwrap=”” endwrap=”” trigclass=…
Utilizzare il metodo data() di jQuery per memorizzare i dati nel DOM
13% JQuery
Se, per un motivo o un altro, si ha bisogno di archiviare temporaneamente i dati, jQuery ha un metodo .data() per la memorizzazione i dati nel DOM. Questo sistema è preferibile da altri come quando si vuole manipolare i va…
Gruppi di 50 e passa esempi in Ajax
11% Ajax
Le applicazioni web hanno fatto passi da gigante nel miglioramento della user experience, grazie anche alla tecnologia Ajax. Quando si combinano le funzionalità di PHP con la bravura di javascript si possono produrre risul…
Nuovi metodi in jQuery 1.6
11% JQuery
In questo articolo ci concentreremo sui nuovi metodi nella versione 1.6 della libreria jQuery JavaScript, così come i cambiamenti ai metodi già esistenti. Le informazioni fornite sono solo un riassunto veloce, raccomando u…
JSONP, chiamate AJAX tra domini
10% Json
Sicuramente quanche volta vi è successo: si tenta di fare una richiesta AJAX in un dominio diverso da quello che si sta lavorando e restituisce un errore. In particolare, l’errore che dà Firefox è il seguente: Access to re…