Question

Folks – I’m trying to learn how to write OO Javascript, I come from as3 OO background…
issue I’m having is with passing a class’ method as a callback to another class…

in the example below, i create an instance of AppController class, and in it, i create an instance of ConnectionMonitor class. I pass one of AppController’s methods to be called back by ConnectionMonitor. The calling back works fine, but seems that what’s inside the callback function looses the scope of the class its in (AppController )…

any thoughts?

//in the HTML
<script>
    $(document).ready( function(){
        new AppContoller().init();
    });
</script>


//in the js file

//AppController Class
var AppContoller = function(){
    this.body = $("body");

    this.init = function(){
        this.connection = new ConnectionMonitor();
        this.connection.detectInitialConnection( this.initialConnectionDetected );
    }

    //callback function I pass
    this.initialConnectionDetected = function(bool){
        if(bool){
            trace("app connected? "+bool); // logs - "app connected? true"
            this.showOnlineSwf();  //thows error - "Object [object DOMWindow] has no method 'showOnline' "
        }
        else{

        }
    }

    this.showOnlineSwf = function(){
        trace("i'm online");

    }

}

//ConnectionMonitor Class
var ConnectionMonitor = function()
{   
    this.detectInitialConnection = function(callbackFunction){
        setTimeout(callbackFunction, 1000, [true]);
    }
}




function trace(arg){
    console.log(arg.toString());
}

Answer 1

setTimeout will run the passed function bound to window. You can override this with ES5’s bind:

this.connection.detectInitialConnection( this.initialConnectionDetected.bind(this) );

This doesn’t work in older browsers, but the provided MDN link has a workaround.