En utilisant le contexte de « ce » mot-clé avec jQuery

Question

En tant que néophyte jQuery je suis un peu confus par les différents contextes dans lesquels le ce mot-clé est utilisé. Parfois, il se réfère à un élément DOM par exemple. this.id et parfois il se réfère à un objet jQuery par ex. $ (this) .val().

Remy Sharp's blog post est utile, mais je voudrais savoir comment vous expliquer la différence à un novice. La différence est-elle strictement un problème jQuery ou commun à tout Javascript?

Merci pour toutes les réponses à ce jour - très bien, je vais choisir une réponse demain. Voici un autre article de blog que j'ai trouvé par la suite et qui m'a également été utile: What is this? by Mike Alsup.

Answer 1

Le message de Remy Sharp est confus si vous ne le lisez pas attentivement, à mon avis. La signification de this ne change jamais. Dans l'exemple que vous avez donné, il y avait 2 utilisations de this. Comme un élément DOM dans un événement:

$('a').click(function() { 
    alert(this.tagName); 
}); 

et enveloppé comme un objet jQuery dans un événement:

$('a').click(function() { 
    alert($(this).val()); 
}); 

Si vous lisez les 2 extraits ci-dessus très attentivement, vous remarquerez que this ne change jamais sens . Il fait toujours référence à l'élément DOM. La différence vient dans la façon dont il est utilisé.

En jQuery, par défaut, this fait référence à l'élément DOM (pas un objet jQuery) qui a déclenché un événement. Dans le deuxième extrait de code ci-dessus, il est toujours le même élément DOM, seulement il est enveloppé dans un élément jQuery en l'entourant $() autour d'elle. Comme avec tout argument du constructeur jQuery, le passage this dans le constructeur le transforme en un objet jQuery.

Je pense que la confusion vient quand Remy commence à parler des plugins jQuery dans le même article que les événements jQuery. Les plugins jQuery sont quelque chose que les gens écrivent rarement et utilisent fréquemment. Lors de l'écriture d'un plugin jQuery, vous travaillez dans le contexte du prototype d'objet jQuery.Dans ce cas, vous utilisez le mot this pour faire référence au plugin que vous écrivez. Dans des cas d'utilisation normale, vous n'écrirez pas des plugins souvent, c'est donc un scénario beaucoup moins commun. Lorsque vous n'êtes pas dans la portée du plugin, vous ne pouvez pas utiliser this pour faire référence à l'objet jQuery.

---

Dans le langage JavaScript, le mot-clé this fait référence à l'instance actuelle d'un objet en JavaScript. Lorsqu'il est utilisé dans un prototype JavaScript, il fait référence à l'instance du prototype. En fonction du navigateur, lorsque vous utilisez le modèle d'événement non jquery, this fait également référence à l'élément DOM. Étant donné que certains navigateurs (Internet Explorer) ne se réfèrent pas à this en tant qu'élément DOM dans un événement, cela rend le travail avec les événements difficile. Pour contourner cela, jQuery effectue une magie JavaScript que toujours fait this se référer à l'élément DOM qui a déclenché l'événement. C'est (une des nombreuses) raisons d'utiliser un framework JavaScript au lieu de rouler le vôtre.

Answer 2

parfois il se réfère à un objet jQuery, par ex. $ (this) .val().

this fait ici référence à un élément DOM; l'appel de la fonction $() est ce qui encapsule l'élément DOM dans un objet jQuery. Pour les rappels d'événement jQuery, this fera (presque?) Toujours référence à un élément DOM. Lorsque vous écrivez une fonction qui étend jQuery, cela peut être appelé avec $ ('select'). Myfunc(), this fera référence à un objet jQuery.

---

En JavaScript en général, this applique lorsqu'une fonction est appelée en tant que propriété d'un objet (l'invocation de méthode à la recherche). Ainsi, compte tenu de la fonction:

function foo() { 
    doSomethingWith(this); 
} 

var obj1 = {'foo': foo}; 
var obj2 = {}; 
obj2.myFoo = foo; 

obj1.foo(); // calls function foo(), with 'this' set to obj1 
obj2.myFoo(); // calls function foo(), with 'this' set to obj2 
foo();  // calls function foo(), with 'this' set to the global object 
      // (which, in a browser, is the window object) 
foo.apply(new Date()); // calls foo(), with 'this' set to a Date object 

Ainsi, en Javascript, le genre d'objet que « ceci » fait référence à une fonction dépend plus de la façon dont une fonction est appelée que la définition réelle de la funciton.

Answer 3

Ne pas oublier que si vous n'êtes jamais sûr de ce que le pas « cela » est dans un contexte donné, vous pouvez diagnostiquer dans Firebug en utilisant la console:

console.log("This is: " + this) 

Si vous utilisez jQuery (comme vous l'avez mentionné que vous étiez), vous pouvez toujours vous assurer que « ceci » est encore un objet jQuery en faisant ceci:

this = $(this); 

Puis, de retour dans la console, vous pouvez voir ce que l'objet jQuery de « ce » est en le connectant dans Firebug:

console.log("The jQuery This is: " + $(this)) 

Enfin, puisque nous parlons de jQuery, il y a des cas où "this" change. Par exemple, lorsque vous effectuez un rappel après une animation ou un fadeIn ou un fadeOut. Dans ce contexte, le "ceci" se réfère à l'élément recevant l'effet. N'oubliez pas, si vous n'êtes jamais sûr de ce qu'est "ceci" ... demandez à la Firebug. Le Firebug voit tout. Le Firebug sait tout.

Answer 4

jQuery Proxy pourrait vous aider à obtenir votre réponse. Vous pouvez appeler une fonction jQuery et modifier l'objet auquel fait référence la portée this.

par exemple. quelque chose comme:

var me = { 
    type: "zombie" 
    ,test: function() {$('#result').html(this.type)} 

}; 

$.proxy(me.test(), me); //prints 'zombie'