Question

I have a helper function which allows me to call functions in a different context. It’s pretty simple:

function delegate(that, thatMethod)
{
    return function() { return thatMethod.apply(that,arguments); }
}

This is ok if I wan’t evaluate the variables at execution of the function, but sometimes I want to give the delegate-function values which are fixed at construction time.
Sample:

var callbacks = new Array();
for(var i = 0; i < 5; i++)
{
    callbacks.push(delegate(window, function() { alert(i) }));
}
callbacks[3]();

In this case my expected behavior is that I get an alert(3) but because i is evaluated at execution we don’t.

I know there is another delegate function which looks something like:

function delegatedd( that, thatMethod )
{
    if(arguments.length > 2)
    {
        var _params = [];
        for(var n = 2; n < arguments.length; ++n) 
            _params.push(arguments[n]);
        return function() { return thatMethod.apply(that,_params); }
    }
    else
        return function() { return thatMethod.call(that); }
}

But that doesn’t help me either because I want to mix both methods. It can be written like that (first version of delegate used):

function(foo) {
    return delegate(window, function() {
        alert(foo);
    });
}(i)

So i is construction time and everything else execution time.
The disadvatage of this is that it looks pretty ugly. Is there a better way to do it? Can I somehow hide it in a function?

Thanks

Answer 1

You can use the bind function:

var callbacks = new Array();
for(var i = 0; i < 5; i++)
{
    //callbacks.push(delegate(window, function() { alert(i) }));
    callbacks.push(function(n) { alert(n) }.bind(window, i);
}
callbacks[3]();

But bind is not implemented on IE(don’t know about IE9), for how get it to work on IE see https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind#Compatibility.