Using the 'this' keyword context with jQuery

Question

As a jQuery neophyte, I am somewhat confused by the various contexts in which the this keyword is used. Sometimes this refers to a DOM element, for example. this.id, and sometimes this refers to a jQuery object, for example. $ (This) .val ().

The Remy Sharp blog post is helpful, but I would like to know how you explain the difference to a beginner. Is the difference strictly a jQuery problem or common to all Javascript?

Thanks for all the answers so far - great stuff, tomorrow I will answer. Here's another blog post that I later came across that was also helpful: What is this? Mike Alsup .

Answer 1

Remy Sharp's post is confusing unless you read it carefully in my opinion. The value of this never changes. In the example you specified, there were 2 uses of this . As a DOM element in an event:

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

and wrapped as a jQuery object in an event:

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

If you carefully read the 2 snippets above, you will notice that this never changes value. It always refers to a DOM element. The difference is how it is used.

In jQuery, by default, this refers to the DOM element (not the jQuery object) that raised the event. In the second code snippet above, there is still the same DOM element, only it is wrapped in a jQuery element, wrapping $() around it. Like any argument in the jQuery constructor, passing this to the constructor will convert it to a jQuery object.

I think there is confusion when Remy starts talking about jQuery plugins in the same article as jQuery events. JQuery plugins are something that people rarely write and often use. When writing a jQuery plugin, you work in the context of a prototype jQuery object. In this case, you use the word this to refer to the plugin you are writing. In normal use cases, you will not often write plugins, so this is a much less common scenario. If you are not using a plugin, you cannot use this to refer to a jQuery object.

---

In JavaScript, the this refers to the current instance of an object in JavaScript. When using JavaScript in the prototype, it refers to the prototype instance. Depending on the browser when using a non-jquery-related event model, this also applies to the DOM element. Since some browsers (Internet Explorer) do not treat this as a DOM element in an event, this makes it difficult to work with events. To get around this, jQuery does some JavaScript magic that always makes this reference to the DOM element that raised the event. This is (one of many) reasons to use the JavaScript framework instead of rolling around on your own.

Answer 2

Remember that if you never know what this means in any context, you can diagnose it in Firebug using the console:

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

If you use jQuery (as you already mentioned, you can always make sure that "this" is still a jQuery object by doing this:

 this = $(this); 

Then, returning to the console, you will see what the jQuery "this" object is, running it in Firebug:

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

Finally, since we are talking about jQuery, there are times when "this" changes. For example, when you call back after an animation of either fadeIn or fadeOut. In this context, "this" will refer to the element receiving the effect.

Just remember, if you never know what "this" is ... ask Firebug. Firebug sees everything. Firebug knows everything.

Answer 3

sometimes this refers to a jQuery object, for example. $ (This) .val ().

this here refers to the DOM element; calling the $ () function is what wraps the DOM element in a jQuery object. For jQuery event callbacks, this will (almost?) Always refer to the DOM element. When writing a function that extends jQuery, it can be called with $ ('select'). Myfunc (), this will reference the jQuery object.

---

In JavaScript, in the general case, this is used when a function is called as a property of an object (method call). So define a function:

 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 

Thus, in Javascript, the type of object that 'this' denotes in a function depends more on how the function is called than the actual definition of the function.

Answer 4

jQuery Proxy can help you get the answer. You can call the jQuery function and change the object referenced by the this scope.

eg. something like:

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