this
est l'élément, $(this)
est l'objet jQuery construit avec cet élément
$(".class").each(function(){
//the iterations current html element
//the classic JavaScript API is exposed here (such as .innerHTML and .appendChild)
var HTMLElement = this;
//the current HTML element is passed to the jQuery constructor
//the jQuery API is exposed here (such as .html() and .append())
var jQueryObject = $(this);
});
Un regard plus profond
this
MDN est contenu dans un contexte d'exécution
La portée fait référence au contexte d'exécution actuel ECMA . Pour comprendre this
, il est important de comprendre le fonctionnement des contextes d'exécution en JavaScript.
les contextes d'exécution lient ce
Lorsque le contrôle entre dans un contexte d'exécution (le code est en cours d'exécution dans cette étendue), l'environnement des variables est configuré (environnements lexical et variable - essentiellement cela crée une zone pour les variables à saisir qui étaient déjà accessibles, et une zone pour les variables locales à stocké), et la liaison de this
se produit.
jQuery lie ceci
Les contextes d'exécution forment une pile logique. Le résultat est que les contextes plus profonds de la pile ont accès aux variables précédentes, mais leurs liaisons peuvent avoir été modifiées. Chaque fois que jQuery appelle une fonction de rappel, il modifie la liaison this en utilisant apply
MDN .
callback.apply( obj[ i ] )//where obj[i] is the current element
Le résultat de l'appel apply
est qu'à l' intérieur des fonctions de rappel jQuery, se this
réfère à l'élément courant utilisé par la fonction de rappel.
Par exemple, dans .each
, la fonction de rappel couramment utilisée permet .each(function(index,element){/*scope*/})
. Dans cette portée, this == element
c'est vrai.
Les rappels jQuery utilisent la fonction apply pour lier la fonction appelée avec l'élément courant. Cet élément provient du tableau d'éléments de l'objet jQuery. Chaque objet jQuery construit contient un tableau d'éléments qui correspondent à l' API jQuery du sélecteur qui a été utilisée pour instancier l'objet jQuery.
$(selector)
appelle la fonction jQuery (rappelez-vous que $
c'est une référence à jQuery
, code:) window.jQuery = window.$ = jQuery;
. En interne, la fonction jQuery instancie un objet fonction. Donc, bien que cela ne soit pas immédiatement évident, l'utilisation en $()
interne new jQuery()
. Une partie de la construction de cet objet jQuery consiste à trouver toutes les correspondances du sélecteur. Le constructeur accepte également les chaînes et les éléments html . Lorsque vous passez this
au constructeur jQuery, vous passez l'élément actuel pour un objet jQuery à construire . L'objet jQuery contient alors une structure de type tableau des éléments DOM correspondant au sélecteur (ou simplement l'élément unique dans le cas de this
).
Une fois l'objet jQuery construit, l'API jQuery est maintenant exposée. Lorsqu'une fonction api jQuery est appelée, elle itère en interne sur cette structure de type tableau. Pour chaque élément du tableau, il appelle la fonction de rappel pour l'API, liant les rappels this
à l'élément actuel. Cet appel peut être vu dans l'extrait de code ci-dessus où se obj
trouve la structure de type tableau, et i
est l'itérateur utilisé pour la position dans le tableau de l'élément en cours.