In javascript callback function not getting value of existing object property

Question

I'm loading js by creating script tag on the fly, I have written a callback function on script load, but when functions get called after js get loaded, I can't access my object property, when I checked it in firebug the value is missing. Below is my code please answer what is the problem in my code, or is there a different method for doing the same.

obj = {
     cont: null,    
     create:function(){
       this.cont = document.createElement('iframe');
       this.cont.style.setProperty('background-color', '#FFFFFF', 'important');
       this.getJs();
     },

getJs:function(){
    var oHead = document.getElementsByTagName('head')[0];
    var oScript = document.createElement('script');
    oScript.type = 'text/javascript';
    oScript.src = 'myjs.js';

    oScript.onload = obj.show;//most browsers

    oScript.onreadystatechange = function() {// IE 6 & 7
        if (this.readyState == 'complete') {
            obj.show();
        }
    }
    oHead.appendChild(oScript);        
},

show:function(){
    alert(this.cont);//this.cont is not available when js load and show function get called as a
}   }obj.create();

Answer 1

This

   oScript.onload = obj.show;//most browsers

doesn't pass the context (obj) to the show function. You need to make a closure like

   oScript.onload = function() { obj.show() }

or use bind if your target browser supports it:

   oScript.onload = obj.show.bind(obj)

Most JS frameworks also include bind or a similar function.

Answer 2

The issue is that this is dynamically scoped. I think this should work:

oScript.onload = function () {obj.show()};