$this vs $(this) in jQuery

Question

I\'ve seen some discussions on SO regarding $(this) vs $this in jQuery, and they make sense to me. (See discussion here for an example.)

Bu

Answer 1

you may have overlooked this line:

var $this = $(this);

Here, $this is just a variable that holds the value of $(this). You can use it interchangeably with $(this) with the benefit that you aren't doing the same lookup over and over.

Answer 2

I want to jump in here, even though I do not have expert jQuery skills.

Countless times I see lines of code or concepts similar to:

var $this = $(this);

So I do a rewrite of it similar to:

var $jims_this = $(this);

And test it. Also I do this to clear up any confusion I might have.

Here is another example of similar poorly explained code:

 <style>
    a.a { font-weight: bold; }
 </style>

Next, add the addClass call to your script:

  $("a").addClass("a");

This does work but it is confusing. It could have been written as:

<style>
a.my_bold_class { font-weight: bold; }
</style>

 $("a").addClass("my_bold_class");

Jim

Answer 3

this in javascript (usually) represents a reference to the object that invoked the current function. This concept is somewhat fuzzied a bit by jQuery's attempts to make the use of this more user friendly within their .each() looping stucture.

outside the .each(), this represents the jQuery object that .lockDimensions is invoked by.

inside the .each() it represents the current iterated DOM object.

Generally the purpose of storing $(this) in a local variable is to prevent you from calling the jQuery function $() multiple times, caching a jQueryized this should help efficiency if you have to use it multiple times.

$ is simply a valid variable name character and is used as the first character of a variable name usually to queue the programmer that it is a jQuery object already (and has the associated methods/properties available).

This question is actually unrelated to chain-ability, but to maintain chain-ability you should return this so that other function calls can be added, and maintain the meaning of this in those calls as well.

Answer 4

$this = $(this) is a way to cache the jQuery object. It is expensive to run the jQuery function each time, so storing the output allows you to re-use the selector over and over again without calling jQuery function again.

Answer 5

It's quite simple: $this = $(this). It's just a shorthand used in the scope of the inner function. The dollar sign is just a character in this case, it doesn't refer to jQuery at all. It might just as well have been named _this or xthis, the $ is just a reminder of what the variable contains.

It may seem pointless, but it eliminates three redundant method invocations (the $() function isn't free) so it is most likely used there for performance reasons.

Answer 6

You have wandered into the realm of javascript scope and closure.

For the short answer:

this.bar()

is executed under the scope of foo, (as this refers to foo)

var barf = this.bar;
barf();

is executed under the global scope.

this.bar basically means:

execute the function pointed by this.bar, under the scope of this (foo). When you copied this.bar to barf, and run barf. Javascript understood as, run the function pointed by barf, and since there is no this, it just runs in global scope.

To correct this, you can change

barf();

to something like this:

barf.apply(this);

This tells Javascript to bind the scope of this to barf before executing it.

For jquery events, you will need to use an anonymous function, or extend the bind function in prototype to support scoping.