javascript anonymous function parameter passing

Question

I have some javascript code (within an object) :

toggle: function() {
    var me = this;
    var handler = function() { me.progress() };
    me.intervalId = setI         


        

Answer 1

The anonymous function has access to me because it is declared inside of the outer function (the toggle function); it is closed over by the outer function.

Your handler function will be called by setInterval, which passes exactly zero arguments. This means you can't use parameters in the handler function itself.

I you really want to pass me explicitly, you could write a function accepting an parameter, and have that function return an anonymous function without parameters, but which could access the creator function's parameter:

toggle: function() {
    var me = this;
    var handler = (function (o) { return function() { o.progress() }; })(me);
    me.intervalId = setInterval(handler, me.intervalTime);
    //...More code
}

But this basically adds a layer of redirection without really making it more legible. Unless you pull that creating function outside:

function createProgressHandler(o) {
    return function() {
        o.progress();
    };
}

// ...

toggle: function() {
    var me = this;
    var handler = createProgressHandler(me);
    me.intervalId = setInterval(handler, me.intervalTime);
    //...More code
}

Answer 2

The reason

var handler = (function(o) { o.progress();})(this));

doesn't work because it just immediately calls the anon function, therefore immediately calling o.progress() and assigns the return value of the anon function (undefined) to handler. You need to return an actual function from the outer function:

handler = (function(me){
    return function(){
        return me.progress();
    }
}(this));

On the flip side this is equivalent and just as bad looking as bad looking as the variable assignment (but can still be useful, particularly if this needs to be done in a loop, with the changing i rather than the fixed this).

---

BTW, if the progress function doesn't have any calls to this inside it , just doing handler = this.progress (without the parens) might suffice.

Answer 3

You can use ".bind()":

var handler = function() { this.progress(); }.bind(this);

New browsers have "bind()", and the Mozilla docs have a solid implementation you can use to patch older browsers.

Answer 4

What you have there is a closure. The function that is created and assigned to handler keeps a reference to the me object. This is normal, everyday JavaScript, and that's the way that closures work generally.

Answer 5

Have you tried to return the function like this?

var handler = function(o){
   return function(){
      o.progress();
   }
}(me);

Now you can call:

handler();