Could someone please explain why 'this' in the following points to the DOM Object and not to Window?

$("a").click(function() {
    console.log(this);
});

This yields to:

<a id="first" href="">

Consider the following which should be the same scenario:

function Foo() {
    this.click = function(f) {
        f();
    }
}

var obj = new Foo();
obj.click(function() {
    console.log(this);
});

What we get here is the Window Object (what I had expected).

Could someone please explain why 'this' in the following points to the DOM Object and not to Window?

$("a").click(function() {
    console.log(this);
});

This yields to:

<a id="first" href="http://jquery.">

Consider the following which should be the same scenario:

function Foo() {
    this.click = function(f) {
        f();
    }
}

var obj = new Foo();
obj.click(function() {
    console.log(this);
});

What we get here is the Window Object (what I had expected).

• javascript
• jquery
• this

• jQuery manipulates this where needed. – Blaster Commented Jul 2, 2012 at 7:53
• As usual, the MDN has some good information about this: developer.mozilla/en/DOM/… – Niko Commented Jul 2, 2012 at 7:56
• I think the person you should ask is John Resig who is responsible for the concept as far as I can tell - I believe it's his doing. Believe it or not - but he is an active member here as well. :) – Shadow Wizzard Commented Jul 2, 2012 at 7:58

4 Answers 4

In Javascript, OOP is different from what you're accustomed to in languages like Java.

Basically, it is easier to think that there is no OOP and that this is just a "hidden argument" of functions.

For example, when you see

function f(x, y, z) {
    console.log(this, x, y, z);
}

think that in mon OOP languages (such as Java) that would be

function f(this, x, y, z) {
    console.log(this, x, y, z);
}

When you see var a = b.f(x, y, z);, think var a = f(b, x, y, z).

When you see var a = f(x, y, z); think var a = f(undefined, x, y, z); (In browser environment, when strict mode is not activated, it is f(window, x, y, z);)

Now it should be easier to understand why this in your example means different things in the nested scopes.

It's up to the context in which the function is executed. jQuery explicitly changes the context of the callback function, whereas your function executes the function in the global context.

to change the context:

function Foo() {
    this.click = function(f) {
        f.apply(this);
    }
}

or

function Foo() {
    this.click = function(f) {
        this.f = f
        this.f();
    }
}

For further reading:

http://dailyjs./2012/06/18/js101-this/

http://dailyjs./2012/06/25/this-binding/

this will be decided by the context.

If you change your code to below, then this will point to some_other_object.

function Foo() {
    this.click = function(f) {
        f.call(some_other_object);
    }
}

jQuery uses the javascript apply function when calling event handlers. From the mdn documentation:

Calls a function with a given this value and arguments provided as an array.