Javascript - scope is lost in callback - Stack Overflow

admin管理员组

文章数量:1356876

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

Share Improve this question Follow edited Oct 30, 2012 at 11:49 Xoundboy asked Oct 29, 2012 at 18:23 XoundboyXoundboy 83611 gold badge1616 silver badges2626 bronze badges 2

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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);

本文标签： Javascriptscope is lost in callbackStack Overflow