OOP. Calling methods from within methods

Question

How do I call class methods from functions within the class? My code is:

var myExtension = {

    init: function() {
        // Call onPageLoad
    },  

    onPageLoad: function() {  
        // Do something    
    },

}  

I've tried ...

onPageLoad();

... from within the init method but it's saying it's not defined.

I'm not having much luck with google because I don't understand the syntax used. All the JS OOP examples I find online are in a different format. I'm using the format Mozilla use for extension development.

Answer 1

The object the current method was invoked on is available via the special variable this. Any time you call a method on an object, this will refer, within the method, to the object.

var myExtension = {

    init: function() {
        this.onPageLoad();
    },  

    onPageLoad: function() {  
        // Do something    
    },

};

this always refers to the calling object rather than the object the function is defined on or is a property of.

value = 'global';
var ob0 = {
        value: 'foo',
        val: function() {
            return this.value;
        },
    },
    ob1 = {value: 'bar'},
    ob2 = {value: 'baz'};

ob0.val(); // 'foo'
ob1.val = ob0.foo;
ob1.val(); // 'bar'
ob0.val.call(ob2); // 'baz'

var val = ob0.val;
val(); // 'global'

In the last case, val is executed as a free function (a function that isn't bound to an object, i.e. not a method), in which case this takes on the value of the global object (which is window in web browsers) within the execution of val. Global variables are actually properties of the global object, hence val() returns 'global' (the value of the global variable named value). Since global variables are actually properties of the global object, you can view free functions as actually being methods of the global object. From this viewpoint, the last two lines (when executed in global scope) are equivalent to:

window.val = ob0.val;
window.val();

This viewpoint doesn't exactly match the reality of scoping, though you'll only notice the difference within functions. In a function, window.val = ... will create a global while var val won't.

value = 'global';
var ob0 = {
        value: 'foo',
        val: function() {
            return this.value;
        },
    };

function lcl() {
    var val = ob0.val; // doesn't set a global named `val`
    return val(); // 'global'
}
lcl(); // 'global'
val(); // error; nothing named 'val'

function glbl() {
    window.val = ob0.val; // sets a global named `val`
    return window.val();  // 'global'
}
glbl(); // 'global'
val(); // 'global'

See MDN's reference page for more on the call method used above. For more on the this variable, see "JavaScript “this” keyword" and "How does “this” keyword work within a JavaScript object literal?"