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 = setInterval(handler, me.intervalTime);
    //...More code
}

I'm kind of new to javascript, so doing the above as far as I can tell actually passes the me variable into anonymous the function. I was wanting to see if there is a more declarative way to do so? I wanted something along the line of:

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

but that doesn't seem to be working... Am I missing something? Is this a case where "this is the way the language works so just declare a local variable and deal with it"?

UPDATE:

The source to my problem was/is my unclear understanding of scope and closures in javascript. I found this article to help me understand a little more.

Answer 1

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 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.