Question

I’m having issues with Javascript properties and “this” keyword. Forgive me here for asking my third and final JS OOP question. OOP in Javascript has been a headache for me today.

I’m trying to set the property ‘source’ but the error console is saying it’s undefined in parseSource method.

After a little research I believe this.source is is referring to window.source? The code is a boilerplate from Mozilla. When creating extensions init is called by FireFox when the plugin is initialized.

What’s the best way to go about setting the properties when creating objects using literal notation?

var myExtension = {
source: null,

init: function() {  
    // The event can be DOMContentLoaded, pageshow, pagehide, load or unload.  
    if(gBrowser) {
        gBrowser.addEventListener("DOMContentLoaded", this.onPageLoad, false);  
    }
},  

onPageLoad: function(aEvent) {  
    doc = aEvent.originalTarget; // doc is document that triggered the event  
    win = doc.defaultView; // win is the window for the doc  

    // Skip frames and iFrames
    if (win.frameElement) return;

    this.source = win.document.getElementById('facebook').innerHTML;
    myExtension.parseSource();
},

parseSource: function() {
    if(this.source == null) {
        // So something
    } else {
        // Do something else
    }
}
}  

window.addEventListener("load", function() { myExtension.init(); }, false);  

Answer 1

When you pass a callback function to gBrowser.addEventListener like this:

gBrowser.addEventListener("DOMContentLoaded", this.onPageLoad, false);  

you are passing a reference to the function which is essentially "detached" from the this object where it is defined. So, you need to do something like the following in order to correctly maintain what this references:

init: function() {  
    var self = this;
    if(gBrowser) {
        gBrowser.addEventListener("DOMContentLoaded", function () {
            self.onPageLoad();
        }, false);  
    }
},

In newer browsers (you did say this is a FF extension), you can use Function.bind to the same effect:

init: function() {
    if(gBrowser) {
        gBrowser.addEventListener("DOMContentLoaded", this.onPageLoad.bind(this), false);  
    }
},

---

Once that’s cleared up, you can change the onPageLoad function to:

onPageLoad: function(aEvent) {  
    doc = aEvent.originalTarget; // doc is document that triggered the event  
    win = doc.defaultView; // win is the window for the doc  

    // Skip frames and iFrames
    if (win.frameElement) return;

    this.source = win.document.getElementById('facebook').innerHTML;
    this.parseSource();
},

---

Edit

A stripped-down demo: http://jsfiddle.net/mattball/bDe6N/