OOP Javascript parent Object method or Object?

Question

var O = {

    elements: {

        main: function() { return jQuery("#main"); },
        footer: function() { return jQuery("#footer"); }
    },

    main: function(html) {

        return (this.elements.main());
    },


    style: {

        setMaincolor: function() {

            // TypeError: Cannot call method 'main' of undefined
            return (this.elements.main());

        }

    }    

};

so; I'm O.style Object parents Objects ????

O.style.setMaincolor() // TypeError: Cannot call method 'main' of undefined
O.main() // [<div id=​"main">​</div>​]

setMaincolor method return this to O Object

Answer 1

this refers to the object on which the method was invoked.

main() is invoked on the O object, so this is a reference to O . Therefore this.elements === O.elements .

setMaincolor() is invoked on the style object, so this will be a reference to O.style , which does not have an .elements property.

Answer 2

You have to explicitly define what this should mean; if not specified, this will point to the nearest object.

You can create a closure for it like so:

var O = (function() {
    var self = {
        elements: {
            main: function() { return jQuery("#main"); },
            footer: function() { return jQuery("#footer"); }
        }
    }

    self.style = {
        setMaincolor: function() {
            return self.elements.main();
        }
    }

    return self;
}());

The (function() { ... }()); returns the object and the self is a "private" variable that only the O object knows about and it points to itself, thereby making the .elements.main() reference work.

Answer 3

since the setMaincolor method is defined within the style object, this refers to the style object. Since the style object has no elements property, this.elements is undefined.

One solution would be something like this, where you name the O object explicitly instead of using this :

var O = {

    elements: {

        main: function() { return jQuery("#main"); },
        footer: function() { return jQuery("#footer"); }
    },

    main: function(html) {

        return (this.elements.main());
    },


    style: {

        setMaincolor: function() {

            // TypeError: Cannot call method 'main' of undefined
            return (O.elements.main());

        }

    }    

};

Answer 4

You cannot reference this.elements in your setMaincolor method. The this -pointer refers to your style-object: Use O.elements.main() in your O.style.setMaincolor function instead.

style: {
    setMaincolor: function() {
        return (O.elements.main());

    }
}   

Although, I don't recommend this approach, note that you also can also use: O.style.setMaincolor.call(O,[]); which makes this reference O .

This is how I would have solved it:

var O = (function() {
   var self = {
       elements: {
           main: function() { return jQuery("#main"); },
           footer: function() { return jQuery("#footer"); }
       },

       main: function(html) {
           return self.elements.main();
       },

       style: {
           setMaincolor: function() {
               return self.elements.main();
           }
       }
   };    

   return self;    
}());