What does "this" mean in jQuery?

Question

In jquery, what does this means and when it is used?

Answer 1

this in JavaScript is very special and powerful. It can mean just about anything. I cover some of it here and here, but it's really worth finding a good tutorial on JavaScript and spending some time with it.

Let's look at jQuery's use of it first, then talk about it more generally in JavaScript (a bit).

In jQuery, specifically

In code written with jQuery, this usually refers to the DOM element that's the subject of the function being called (for instance, in an event callback).

Example jQuery event callback (what this is is covered in the .bind docs):

$("div").click(function() {
    // Here, `this` will be the DOM element for the div that was clicked,
    // so you could (for instance) set its foreground color:
    this.style.color = "red";

    // You'll frequently see $(this) used to wrap a jQuery object around the
    // element, because jQuery makes lots of things a lot simpler. You might
    // hide the element, for example:
    $(this).hide();
});

Similarly, various jQuery functions that act on all of the elements matched by the current jQuery selector can optionally accept a function, and when that function gets called, this is again the DOM element in question — for instance, the html function allows this:

// Find all divs inside the `foo` element, and set
// their content to their CSS class name(s)
// (Okay, so it's a hokey example)
$("#foo div").html(function() {
    return this.className;
});

Another place jQuery uses this is in the callback on jQuery.each:

var a = ["one", "two", "three"];
jQuery.each(a, function() {
    alert(this);
});

...which will alert "one", then "two", then "three". As you can see, this is a totally different usage of this.

(Confusingly, jQuery has two functions called each, the one above which is on the jQuery/$ function itself and always called that way [jQuery.each(...) or $.each(...)], and a different one on jQuery instances [objects] rather than the jQuery/$ function iself. Here are the docs for the other one, I don't discuss the other one in this answer because it uses this the same way html and event callback do, and I wanted to show a different use of this by jQuery.)

Generically in JavaScript

this refers to an object. Update: As of ES5's strict mode, that's no longer true, this can have any value. The value of this within any given function call is determined by how the function is called (not where the function is defined, as in languages like C# or Java). The most common way to set up this when calling a function is by calling the function via a property on the object:

var obj = {};
obj.foo = function() {
    alert(this.firstName);
};
obj.firstName = "Fred";
obj.foo(); // alerts "Fred"

There, because we called foo via a property on obj, this was set to obj for the duration of the call. But don't get the impression that foo is in any way married to obj, this works just fine:

var obj = {};
obj.foo = function() {
    alert(this.firstName);
};
obj.firstName = "Fred";
obj.foo(); // alerts "Fred"

var differentObj = {};
differentObj.firstName = "Barney";
differentObj.bar = obj.foo; // Not *calling* it, just getting a reference to it
differentObj.bar(); // alerts "Barney"

In fact, foo isn't intrinsically tied to any object at all:

var f = obj.foo; // Not *calling* it, just getting a reference to it
f(); // Probably alerts "undefined"

There, since we didn't call f via an object property, this wasn't explicitly set. When this isn't explicitly set, it defaults to the global object (which is window in browsers). window probably doesn't have a property firstName, and so we got "undefined" in our alert.

There are other ways to call functions and set what this is: By using the function's .call and .apply functions:

function foo(arg1, arg2) {
    alert(this.firstName);
    alert(arg1);
    alert(arg2);
}

var obj = {firstName: "Wilma"};
foo.call(obj, 42, 27); // alerts "Wilma", "42", and "27"

call sets this to the first argument you give it, and then passes along any other arguments you give it to the function it's calling.

apply does exactly the same thing, but you give it the arguments for the function as an array instead of individually:

var obj = {firstName: "Wilma"};
var a   = [42, 27];
foo.apply(obj, a); // alerts "Wilma", "42", and "27"
//             ^-- Note this is one argument, an array of arguments for `foo`

Again, though, there's a lot more to explore about this in JavaScript. The concept is powerful, a bit deceptive if you're used to how some other languages do it (and not if you're used to some others), and worth knowing.

Here are some examples of this not referring to an object in ES5's strict mode:

(function() {
    "use strict";   // Strict mode

    test("direct");
    test.call(5, "with 5");
    test.call(true, "with true");
    test.call("hi", "with 'hi'");

    function test(msg) {
        console.log("[Strict] " + msg + "; typeof this = " + typeof this);
    }
})();

Output:

[Strict] direct; typeof this = undefined
[Strict] with 5; typeof this = number
[Strict] with true; typeof this = boolean
[Strict] with 'hi'; typeof this = string

Whereas in loose mode, all of those would have said typeof this = object; live copy.

Answer 2

The this Keyword

In JavaScript, the thing called this, is the object that "owns" the JavaScript code.

The value of this, when used in a function, is the object that "owns" the function.The value of this, when used in an object, is the object itself. The this keyword in an object constructor does not have a value. It is only a substitute for the new object.The value of this will become the new object when the constructor is used to create an object.

Note that this is not a variable. It is a keyword. You cannot change the value of this.

Answer 3

Here is how i would explain it, simply:

this refers to the object that called the function.

so looking at this:

var foo = {
  name: "foo",
  log: function(){
    console.log(this.name);
  }
}

var bar = {
  name: "bar"
}
bar.log = foo.log;
bar.log();

the bar object stores a reference of foo's log method into it's own log property for itself. now when bar calls its log method, this will point to bar because the method was called upon by the bar object.

this works for any other object, even the window object. if you call a function via the global scope, this will point to the window object.

by using the bind or call methods of a function, you can explicitly define what the object this will refer to during execution.

Fun fact: anything defined in the global scope, which is the top layer/level, becomes a property of the window object (global scope = window object).

Answer 4

Top Google result for "javascript this": http://www.quirksmode.org/js/this.html

Edit: I think the key sentence is:

"In JavaScript "this" always refers to the “owner” of the function we're executing, or rather, to the object that the function is a method of."

Quirksmode is (generally*) excellent, worth reading the whole article in detail.

*Apparently this statement is not necessarily correct, see T.J. Crowder's comment below.

Answer 5

The keyword this acts as a placeholder, and will refer to whichever object called that method when the method is actually used in Java Script

Answer 6

Regular functions belong to the class that defines these functions and the same object that invokes the function is passed to the function as the fist parameter and function handle it with this keyword;

When an object is created from a class it contains only a set of properties and there is no function in the object. And the functions belong to the class. however, how is a function called by an object?

Consider the following code.

var obj = {
            p1: 'property 1',

            func1 () {
                return this.p1
            },

            func2 (param) {
                return this.p1 + param
            }
    }

And also call functions by obj object

obj.func1 ();
obj.func2 ('A');

In fact, functions at runtime look like the following

var obj = {
            p1: 'property 1',

            func1 (this) {
                return this.p1
            },

            func2 (this, param) {
                return this.p1 + param
            }
    }

func1 (obj);
func2 (obj, 'A');

With bind method can create a new function that does not belong to class and can set 'this' parameter with a fixed object;

this.func1 = this.func1.bind(aObject)

In arrow functions, this binds to the object that defined the arrow function and that the object passed to the function asthis parameter.