What is the reason for var $this = this

Question

I'm not the best at jquery and I came across a var initialization that I don't know why the person who wrote the code did it this way.

In the init for a plugin, we have

this.init = function(settings) {
    var $this = this;
    this.s = {
        initialSlide: 0,
        firstSlide: true,
    };
   ... more code, some uses $this, some uses "this"
}

So what is the difference here between "$this" and "this" and why not use one or the other all the time?

Solution 1

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
    });
};

Solution 2

In this case, nothing. $this is just another variable declaration which has this assigned to it.

Typically, I've seen this shortcut used by people using JavaScript libraries when wrapping this. For example, typical usage in jQuery would be:

// rather than writing $(this) everywhere
var $this = $(this);

$this.each(function(){
    // Do Something
});

Solution 3

In actuality jQuery is a wrapper around the JavaScript DOM, both enhancing and simplifying it. Very briefly JQuery selectors return JQuery Object/s i.e.

var jQueryResults = $("article"); //Contains all article elements in the DOM as JQuery objects

However, selecting elements with Javascript returns HTML DOM elements i.e.

var normalResults = document.getElementsByTagName("article");//Contains all article elements in the DOM as HTML objects

The issues arise in that DOM objects do not provide the same functionality that JQuery objects provide.

Here is an event example which illustrates the difference:

$('.changeColorHover').hover(function() {
    this.attr("style", "color:red");
}); //Will not work as we are trying to call a JQuery method on a DOM object

With the above mentioned in mind the 'this' keyword is a DOM object and thus you are required to convert it to a jQuery object in order to utilise jQuery methods.

 $('.changeColorHover').hover(function() {
        $(this).attr("style", "color:red");
 }); //Will work since we have first converted the DOM object to a JQuery object

To sum up, the this keyword, allows you to access the object that called the event as this will give a reference to the object that raised the event. But, this is a DOM object, not a jQuery object. As a result, any of the jQuery methods you'd like to use aren't available, unless you convert it to a jQuery object.

Comments

[Namrata Das]

Incorrect, reassigning this to a different variable allows inner closures to reference the outer scope.

[Hitesh]

for older version of jQuery how do you write $this ? jQuerythis??

[Lucas Reppe Welander]

var $this is just as any other variable name, the $ and this is just a way to keep another person who reads the code to know what the variable does further down the page. In short terms, yes you could write var jQuerythis but that doesnt really makes any difference. You can use $ in older jQuery aswell, as stated above the $this isnt jQuery dependent, it's just a way to create a copy of this.