$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.)

But what about the snippet below, from the jQuery website plugin tutorial showing how chainability works?

(function ($) {

    $.fn.lockDimensions = function (type) {

        return this.each(function () {

            var $this = $(this);

            if (!type || type == 'width') {
                $this.width($this.width());
            }

            if (!type || type == 'height') {
                $this.height($this.height());
            }

        });

    };
})(jQuery);

What does $this represent above? Just when I think I have it figured out ...

`var $this = $(this);` - it's just a short-hand to not have to jQuerify `this` on every call. — bzlm, Sep 12 '11 at 15:06
In your code `$this` is a local variable that caches the `$( this )` jQuery object. — Šime Vidas, Sep 12 '11 at 15:06
What's unclear about `var $this = $(this)`? That line of code makes `$this` equal to `$(this)`. — Matt Ball, Sep 12 '11 at 15:07
I'm writing my answer... tralala... then suddenly a message pops up: "11 new answers have been posted". Huh... `:D` — Šime Vidas, Sep 12 '11 at 15:09
`var $matt = $(matt);` @Šime, low hanging fruits are the tastiest! — bzlm, Sep 12 '11 at 15:09
@Sime You know it's an easy question when 11 other people are typing away furiously trying to be the first to answer :P — Joe, Sep 13 '11 at 09:23
[Related question](http://stackoverflow.com/q/10433014/601179) about the cost of `$(this)` — gdoron, Jun 20 '12 at 09:18

score 122 · Accepted Answer · answered Sep 12 '11 at 15:06

122

$this is just an ordinary variable. The $ character is a valid character in variable names, so $this acts the same as any other non-reserved variable name. It's functionally identical to calling a variable JellyBean.

answered Sep 12 '11 at 15:06

Joe

15,669
4
48
83

34

Usually you name $vars when they are jQuery objects, so you remember they are $ and not simple JavaScript objects. – whallz Oct 04 '11 at 18:58

ThiefMaster · Answer 2 · 2012-03-10T11:04:01.593

69

You usually use var $this = $(this); to avoid creating a new jQuery object more often than necessary. In case of the code below you only create one object instead of two/four. It is completely unrelated to chainability.

You could also call it that, $thi$ or anything else (don't use the latter one though, it's ugly :p) as $ is just a simple character in JavaScript, exactly like a-z are.

edited Mar 10 '12 at 11:04

answered Sep 12 '11 at 15:05

ThiefMaster

310,957
84
592
636

1

+1 [Related question](http://stackoverflow.com/q/10433014/601179) about the cost of `$(this)` – gdoron Jun 20 '12 at 09:18

jondavidjohn · Answer 3 · 2011-09-19T16:38:41.523

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.

score 14 · Answer 4 · answered Sep 12 '11 at 15:06

14

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.

answered Sep 12 '11 at 15:06

evan

4,239
1
18
18

score 12 · Answer 5 · answered Sep 12 '11 at 15:05

12

$this is simply a local variable, named that way to remind you of $(this). It saves the work of creating the jQuery version of this, and you can use it a number of times.

answered Sep 12 '11 at 15:05

Ned Batchelder

364,293
75
561
662

score 10 · Answer 6 · edited Jun 24 '15 at 08:48

10

 $this = $(this)

which means that you are assigning the current object to a variable named $this. It is not a keyword.

It is just a variable name.

edited Jun 24 '15 at 08:48

Preeti Maurya

431
1
7
17

answered Jan 21 '13 at 08:58

Sudheer Kumar

473
1
7
21

score 10 · Answer 7 · answered Sep 12 '11 at 15:05

10

$this is just a local copy of this wrapped in jQuery.

In the long term, keeping a local copy rather than wrapping this each time it is needed is much more efficient.

answered Sep 12 '11 at 15:05

Justin Niessner

242,243
40
408
536

You are right, instead of invoking a function all the time to get the reference, a cached copy is better choice. – Tarik Sep 13 '11 at 17:17

score 10 · Answer 8 · answered Sep 12 '11 at 15:06

10

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

answered Sep 12 '11 at 15:06

Billy Moon

57,113
24
136
237

score 9 · Answer 9 · answered Sep 12 '11 at 15:06

9

It just fills $this variable with $(this), so you do not have to lookup for $(this) element every call. It has better performance

var $this = $(this);

answered Sep 12 '11 at 15:06

genesis

50,477
20
96
125

score 7 · Answer 10 · answered Sep 12 '11 at 15:05

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.

score 7 · Answer 11 · answered Sep 12 '11 at 15:07

Inside $.fn.lockDimensions, this is the jQuery object that had lockDimensions called on it.

Inside the .each, this now references the DOMElement in the current iteration of the loop. $(this) wraps the DOMElement in a jQuery object, and var $this = $(this); is just saving $(this) in a variable called $this, so the jQuery constructor doesn't need to be called multiple times (if you were to use $(this) instead).

Muhammad Usman · Answer 12 · 2011-09-15T16:25:18.573

7

$ sign is usually used before variable names in JavaScript to differentiate between general value and jQuery object. So here $this just gets the value of $(this) which returns jQuery object of this. $ is just a part of valid variable name.

edited Sep 15 '11 at 16:25

answered Sep 12 '11 at 15:09

Muhammad Usman

12,439
6
36
59

score 4 · Answer 13 · answered Oct 19 '12 at 12:14

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

score 4 · Answer 14 · answered Sep 12 '11 at 15:05

4

$this is a variable named $this containing a reference to $(this). A bit pointless IMO.

answered Sep 12 '11 at 15:05

spender

117,338
33
229
351

9

Pointless? It eliminates creating 4 separate jquery objects of the same thing. – Andrew Sep 12 '11 at 15:07
6

@Andrew, surely someone called Spender does not care about spending more CPU cycles than necessary. – bzlm Sep 12 '11 at 15:08
Yep. Is that a problem though? Until it's measurably problematic, it ain't a problem. – spender Sep 12 '11 at 15:09
It also eliminates 18 chars from the minified file. – Andrew Sep 12 '11 at 15:11
@spender, go measure it and restore your honor! :) – bzlm Sep 12 '11 at 15:12
I have none. It's Monday. Ask me again tomorrow! – spender Sep 12 '11 at 15:14

score -5 · Answer 15 · edited Oct 17 '12 at 04:32

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.

$this vs $(this) in jQuery

15 Answers15

Linked