CODEWITHSUNDEEP
javascriptclassobjectdesign-patternsparent
pixelscript
pixelscript

Reputation: 392

Accessing parent objects while using a javascript module pattern variant

Hi I'm using this module pattern variant and I'm looking for the best way to get access to a parent object. I realise there is no way to know what parents an object has so I want to include some context in the constructor. I thought this would work but it doesn't, any ideas?

$(document).ready(function(){ 

    var main = new Main();

});


function Main() {

    var one = 'hello';

    init();

    function init() {
        var data = new Data(this);
        var two = data.load();
        console.log(one+' '+two);
        data.output();
    }

}

function Data(context) {

    // public vars / methods

    var pub = {
        'load' : function() {
            return ('world');
        },
        'output' : function() {
            var one = context.one // <-- what should this be?
            var two = this.load();
            console.log (one+' '+two);
        }
    }

    return pub;

}

The output is:

hello world
undefined world

Upvotes: 1

Views: 558

Answers (1)

hugomg
hugomg

Reputation: 69984

When you call a constructor function with the new operator, you are basically doing something like

function Main(){
    var this = //magic new object
               //provided by the runtime

    //your code comes here

    return this;
    //because your Data function returns a value,
    // you never get to this line. Perhaps you should use
    // a regular non-constructor data() function instead?
}

When you declare a private variable with var it will just be a plain variable and nothing else. If you want to add things to the this you need to do so explicitely

this.one = 'hello';

But that is not all! this is not lexically scoped so the init function gets its own other this that is unrelated to the this from outside (this explains the undefined you get). When you want to use this in an inner function you need to do a workaround, like in:

var that = this;

function init(){
    new Data(that);
}
init();

That said, just by your example I don't see why you need to do all of this. I prefer to use constructor functions (and new) only when strictly necessary (when I want to make use of prototypal inheritance). In your case perhaps you can get away with a "less OO" approach? 

//main doesn't need to be a class
// this is not Java :)
function main(){

    //just a plain object for the 
    //context. Create a separate class
    //if you really need to...
    var context = {
        one: 'hello'
    };

    var data = new Data(context);
    var two = data.load();
    console.log(one+' '+two);
    data.output();
}

Upvotes: 2

Related Questions