web-dev-qa-db-fra.com

Quelle est la différence entre '$ (this)' et 'this'?

Je travaille actuellement sur ce tutoriel: Mise en route avec jQuery

Pour les deux exemples ci-dessous:

$("#orderedlist").find("li").each(function (i) {
    $(this).append(" BAM! " + i);
});
$("#reset").click(function () {
    $("form").each(function () {
        this.reset();
    });
});

Notez que dans le premier exemple, nous utilisons $(this) pour ajouter du texte à l'intérieur de chaque élément li. Dans le deuxième exemple, nous utilisons directement this lors de la réinitialisation du formulaire.

$(this) semble être utilisé beaucoup plus souvent que this.

Mon hypothèse est dans le premier exemple, $() convertit chaque élément li en un objet jQuery qui comprend la fonction append() alors que dans le second exemple, reset() peut être appelé directement la forme.

Fondamentalement, nous avons besoin de $() pour des fonctions spéciales réservées à jQuery.

Est-ce correct?

javascriptjquerythis
556
Kevin Wu

Oui, vous n’avez besoin que de $() lorsque vous utilisez jQuery. Si vous voulez que jQuery vous aide à faire les choses dans le DOM, gardez cela à l'esprit.

$(this)[0] === this

En gros, chaque fois que vous récupérez un ensemble d’éléments, jQuery le transforme en objet jQuery . Si vous savez que vous n'avez qu'un seul résultat, il sera dans le premier élément.

$("#myDiv")[0] === document.getElementById("myDiv");

Etc...

505
Spencer Ruport

$() est la fonction constructeur jQuery.

this est une référence à l'élément d'invocation DOM.

Donc, fondamentalement, dans $(this), vous ne faites que passer le this dans $() en tant que paramètre pour pouvoir appeler des méthodes et des fonctions jQuery.

363
Reigel

Oui, vous avez besoin de $(this) pour les fonctions jQuery, mais lorsque vous souhaitez accéder aux méthodes javascript de base de l'élément qui n'utilisent pas jQuery, vous pouvez simplement utiliser this.

90
Alex King

Lorsque vous utilisez jQuery, il est conseillé d'utiliser $(this) en général. Mais si vous connaissez (vous devez apprendre et connaître) la différence, il est parfois plus pratique et plus rapide d’utiliser simplement this. Par exemple:

$(".myCheckboxes").change(function(){ 
    if(this.checked) 
       alert("checked"); 
});

est plus facile et plus pur que

$(".myCheckboxes").change(function(){ 
      if($(this).is(":checked")) 
         alert("checked"); 
});
72
Fredrick Gauss

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

thisMDN est contenu dans un contexte d'exécution

La portée fait référence au courant contexte d'exécutionECMA. Pour comprendre this, il est important de comprendre le fonctionnement des contextes d'exécution en JavaScript.

les contextes d'exécution lient ceci

Lorsque le contrôle entre dans un contexte d’exécution (le code est exécuté dans cette étendue), l’environnement pour les 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 ce

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 applyMDN.

callback.apply( obj[ i ] )//where obj[i] is the current element

Le résultat de l'appel de apply est que à l'intérieur des fonctions de rappel jQuery, this fait référence à l'élément en cours utilisé par le rappel une fonction.

Par exemple, dans .each, la fonction de rappel couramment utilisée autorise .each(function(index,element){/*scope*/}). Dans cette étendue, this == element est vrai.

les callbacks jQuery utilisent la fonction apply pour lier la fonction appelée à l'élément en cours. 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 à sélecteuraPI jQuery utilisé pour instancier l'objet jQuery.

$(selector) appelle la fonction jQuery (rappelez-vous que $ est une référence à jQuery, code: window.jQuery = window.$ = jQuery;). En interne, la fonction jQuery instancie un objet fonction. Ainsi, bien que cela ne soit pas immédiatement évident, utiliser $() en interne utilise new jQuery(). Une partie de la construction de cet objet jQuery consiste à rechercher toutes les correspondances du sélecteur. Le constructeur acceptera également les chaînes html et les éléments . Lorsque vous passez this au constructeur jQuery, vous transmettez l'élément en cours pour qu'un objet jQuery soit construit avec . 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 que l'objet jQuery est construit, l'API jQuery est maintenant exposée. Lorsqu'une fonction jQuery api est appelée, elle itérera en interne sur cette structure semblable à un tableau. Pour chaque élément du tableau, il appelle la fonction de rappel de l'api, liant le this du rappel à l'élément actuel. Cet appel peut être vu dans l'extrait de code ci-dessus où obj est la structure de type tableau, et i est l'itérateur utilisé pour la position dans le tableau de l'élément actuel.

45
Travis J

Oui, en utilisant $(this), vous avez activé la fonctionnalité jQuery pour l'objet. En utilisant simplement this, il ne dispose que de la fonctionnalité Javascript générique.

39
Ray Lu