Binding your setTimeout methods in JavaScript using Prototype

Two features which are indispensable in Prototype are it’s bind and bindAsEventListener functions. I’m not going to write about what they can do for you, but do know that they are indispensable to OO JavaScript for callbacks, lambda functions, closures etc… One place where I desperately wanted to use bind()ing, as well as have the ability to call methods within an instantiated Class, was with setTimeout() callbacks. Here’s the solution I came up with:

var _Class = Class.create({
    initialize: function() {
        this._someVar = 0;
    },
    function1: function() {
        this._someVar++;
        this.function3();
    },
    function2: function() {
        var _lambda = this.function1.bind(this);
        setTimeout(_lambda,10);
    },
    function3: function() {
        alert(this._someVar);
    }
});

var object = new _Class;
object.function3(); // 0
object.function2(); // 1

Basically, what you do is assign the method you want to call [without the parenthesis ()] to a variable [in this case, _lambda], and finally bind() it…

var _lambda = this.function1.bind(this);

Then, simply assign _lambda to setTimeout().

If you don’t bind() this to the method, it will assume that the this you’re referring to is window, and not your _Class instance.

As always, please comment with any constructive contributions below. I know this isn’t probably the best way to implement this, so if you know a better way, please comment!