Question

I have the following code:

var dp = dp || {
    VERSION : '0.00.02',
    startApp : function() {
        $(app.init);
        $(app.start);
    }
};
dp.startApp();

which calls app.init and app.start below:

var app = app || {};

app.init = function() {
    this.baseElement = $('div#app');
    $('body').css('background-color', 'beige');
};

app.start = function() {
    //this.baseElement.html('showing this'); //this works
    //this.show(); //error: show is not a function
    app.show(); //error: show is a function, but baseElement is undefined
};

app.show = function() {
    this.baseElement.html('showing this');
};

why in app.start does:

• the first line work
• the second line show it is not a function
• the third line say that baseelement is undefined

Answer 1

Since you are passing the functions to document.ready, jQuery will call them with this set to document. That means you can set arbitrary properties on document of course, but it’s not a jQuery object so it doesn’t have the methods you are calling.

You can try this:

$(dp.startApp) //Since `this` doesn't matter here

and

startApp : function() {
    app.init(); //Calling the functions as property of `app`, will make `this` set to `app`
    app.start();
}

I guess the biggest thing you are missing here is that the binding of this is dynamic and is determined by the way you call functions, not how you define them.