I have the following code:

var myPage = {};
myPageponent = function(callback){

    var somethingHappened = true;

    if (somethingHappened){
        callback();
    }
};

myPage.main = function(){

    // Initialise.
    this.init = function(){

        // make an instance of my ponent
        thisponent = new myPageponent( this.callback );

        // need my utility function here
        this.doSomethingUseful();
    };

    // Callback to be executed when something happs in the ponent.
    this.callback = function(){
        this.doSomethingUseful(); // doesn't work
    };

    // A useful utility that needs to be accessible from both the 
    // init() and callback() functions
    this.doSomethingUseful = function(){
        // some utility stuff
    };
};
new myPage.main().init();

What's the best way for me to ensure that the myPage.main scope is available when the callback function is executed from the ponent?

I have the following code:

var myPage = {};
myPage.ponent = function(callback){

    var somethingHappened = true;

    if (somethingHappened){
        callback();
    }
};

myPage.main = function(){

    // Initialise.
    this.init = function(){

        // make an instance of my ponent
        this.ponent = new myPage.ponent( this.callback );

        // need my utility function here
        this.doSomethingUseful();
    };

    // Callback to be executed when something happs in the ponent.
    this.callback = function(){
        this.doSomethingUseful(); // doesn't work
    };

    // A useful utility that needs to be accessible from both the 
    // init() and callback() functions
    this.doSomethingUseful = function(){
        // some utility stuff
    };
};
new myPage.main().init();

What's the best way for me to ensure that the myPage.main scope is available when the callback function is executed from the ponent?

• javascript

• The this keyword has nothing to do with the variable scope of the function – Bergi Commented Oct 29, 2012 at 18:30
• better to correct someone rather than simply stating that they are incorrect. @Xoundboy you're thinking about context, not scope. – Ilia Choly Commented Nov 1, 2012 at 17:49

3 Answers 3

use bind:

this.callback = function(){
    this.doSomethingUseful(); // doesn't work
}.bind(this);

If you want to supply scope, you can use Function.prototype.call.

var foo = 'bar';
function(){
  // this = 'bar';
}.call(foo);

Instantiate object with this function:

function newClass(klass) {
    var obj = new klass;

    $.map(obj, function(value, key) {
        if (typeof  value == "function") {
            obj[key] = value.bind(obj);
        }
    });

    return obj;
}

This will do automatic binding of all function, so you will get object in habitual OOP style, when methods inside objects has context of its object.

So you instantiate you objects not through the:

var obj = new myPage();

But:

var obj = newClass(myPage);