jQuery: What’s the Difference Between $(this), $this, and this?

What about $this?

$this is a little different because it’s actually just a variable that uses the $. It has no inherent relation to jQuery.

It would be no different than JavaScript variables named $corn or $carrots.

You just was easily say var $this = “My pet cat is named Mittens.”; It’s just a variable with the dollar sign in it.

JavaScript allows characters like this in variable names.

The reason that you see use of $this inside of jQuery plugins is that often times developers in the global scope inside of their plugin will say something like:

var $this = $(this);

That way they can always have a reference to the object on which the plugin was called.

The scope of “this” will change in any methods used inside the plugin so it’s always good to have a global variable (that is, global inside the plugin scope) which you can refer to the object on which the plugin was called.

But the important thing to remember is that $this has no inherent relation to jQuery. It’s just a variable like any other.

What is the reason for var $this = this

Generally, this means a copy of this. The thing about this is that it changes within each function.

Storing it this way, however, keeps $this from changing whereas this does change.

jQuery heavily uses the magic this value.

Consider this code, where you might need something like you are seeing:

$.fn.doSomethingWithElements = function() {
    var $this = this;
    this.each(function() {
        // `this` refers to each element and differs each time this function
        //    is called
        //
        // `$this` refers to old `this`, i.e. the set of elements, and will be
        //    the same each time this function is called
    });
};