Question

In my application,I use following codes:

(function(){
    var app={
        toHomePage:function(){
            var that=this;
            var handler={
                xx:function(){
                    //now I have to call the clear method.
                    // 1) app.clear();
                    // 2) that.clear()
                }
            };
        },
        resize:function(){},
        clear:function(){}
    }
})();

I want to know in the handler method, use app or that?

Answer 1

Note that in a function, this is set entirely by how you call the function. If you will only ever call the function using:

app.toHomePage()

then within the function this will reference app. However, if someone does:

var x = app.toHomePage;
...
x();

then this within the function will initially be undefined, so it will be set to the global object or, in strict mode, to undefined. The same for apply and call, where this can be set to anything.

So likely better to just use app, since the identifier is within a closure and therefore unlikely to change its name. BTW, this is a common dilemma.

Edit

To explain the listener case:

<input type="button" onclick="app.toHomePage();" ...>  // `this` is app.

input.addEventListener('click', app.toHomePage, false);  // `this` is the input element.

input.onclick = app.toHomePage;  //`this` is the input element.

input.attachEvent('onclick', app.toHomePage);  // this is window