Javascript callbacks losing 'this'

Others have already explained the causes of the problem and how to fix it with jQuery. What's left is how you fix it with standard JavaScript. Instead of ...

$('#some-element').click(this.doSomething);

... you write:

document.getElementById('some-element').addEventListener('click', this.doSomething.bind(this));

This changes the context of this inside doSomething. You can also do that with anonymous functions - instead of ...

$('#some-element').click(function(event) {
    console.log(this);
});

... you write:

document.getElementById('#some-element').addEventListener('click', (function(event) {
    console.log(this);
}).bind(this));

That has been very useful to me in projects with lots of callbacks, e.g. in Node.js (where you don't have to care about outdated browsers).

Edit: getElementById() and addEventListener() instead of $(...).click(...).


function CheckBox(input_id) {
    this.id = input_id;
    this.doSomething = $.proxy( this.doSomething, this );
    $('#some-element').click(this.doSomething);
}

The "javascript equivalent" of this is Function#bind but that is not available in every browser and since it seems you are using jQuery I am using the jQuery equivalent $.proxy


Your problem is with this line: $('#some-element').click(this.doSomething);

Why this is a problem

JavaScript methods don't know anything about the object that should be assigned to this, it's set when the method is called either explicitly (with myFunction.call(obj)) or implicitly (when called using obj.myFunction()).

For example:

var x = {
    logThis: function () {
        console.log(this);
    }
};

x.logThis(); // logs x
x.logThis.call(y); // logs y

var func = x.logThis;
func(); // logs window: the fallback for when no value is given for `this`

In your case, you're passing this.doSomething to jQuery, which is then explicitly calling it with the element that was clicked as the value of this. What's happening is (a slightly more complex version of) this:

var callback = this.doSomething;
callback.call(anElement, anEvent);

The solution

You need to make sure that doSomething is called with the right value of this. You can do that by wrapping it in another function:

var cb = this;
$('#some-element').click(function() {
    return cb.doSomething();
});

jQuery provides a proxy function lets you do this more simply:

$('#some-element').click(jQuery.proxy(this.doSomething, this));