Accessing parent objects while using a javascript module pattern variant

Question

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

hugomg · Accepted Answer · 2011-11-06 14:46:40Z

2

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();
}

answered Nov 6, 2011 at 14:46

hugomg

70.4k30 gold badges168 silver badges257 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pixelscript Over a year ago

Thank you for your answer it was very clear and just what I was after. I agree my example does not need the added complexity, I just made it as simple as possible to demonstrate the pattern. Thanks again!

Collectives™ on Stack Overflow

Accessing parent objects while using a javascript module pattern variant

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related