Kanpeki Kanpeki - 5 months ago 8
jQuery Question

Saving "this" when binding a function from a class

I have a simple class in JavaScript:

function MyCounter() {
this.counter = 0;
$('#button').click(this.run);
}

MyCounter.prototype.run = function() {
this.counter += 1;
return console.log(this.counter);
};


This class is invoked like that:

var myCounter = new MyCounter();


HTML includes a single clickable button with ID="button". Clicking this button is supposed to increment an internal variable inside a
myCounter
instance. Obviously, it fails because
this.counter
does not exist, because at the time on execution of bound handler
this
equals to event, not
myCounter
instance.

A crude hack to overcome this is to save "this" to some other variable and wrap calling actual handler into a anonymous function:

function MyCounter() {
this.counter = 0;
var this2 = this;
$('#button').click(function() {
this2.run();
});
}


Is there a better, cleaner way? Or at least, may be there's an universal agreement / style guide on how to name such "temporary this" variables?

Answer

You can just use .bind():

$('#button').click(this.run.bind(this));

.bind() creates a mini stub function that essentially does this for you:

var self = this;
$('#button').click(function() {
    return self.run();
});
Comments