Using module pattern, why reference is undefined?

Question

I'm trying to implement the modular pattern:

var mod1, mod2;
mod1 = (function (mod2) {
    var obj = {};
    obj.whichMod = function () {
        mod2.whichMod();
    };
    return obj;
}(mod2));

mod2 = (function (mod1) {
    var obj = {};
    obj.whichMod = function () {
        console.log('mod2');
    }
    return obj;
}(mod1));


mod1.whichMod();

When I call mod1.whichMod() method, it says mod2 is not undefined. Why is this?

I want mod1.whichMod() to call mod2.whichMod() but mod2 should be "defined" after mod1 like shown above.

mod2 does not exist yet when you are passing it into your closure. the way this is setup you will face the same problem if you move mod2 above because mod1 wont exist. — Tony
– Tony, Commented Sep 12, 2014 at 17:35
But in the last line: mod1.whichMod(), both mod1 and mod2 are created. When I pass mod2 to mod1, isn't it by reference? — firebird
– firebird, Commented Sep 12, 2014 at 17:37
Strange, if I replace "obj" with "this" (ex: this.WhichMod = function() {}), it works. — firebird
– firebird, Commented Sep 12, 2014 at 17:41
Yeah, the obj being created was stuffed with the 'undefined' object then passed back. using 'this' you are just returning the function object itself which still has access to mod2. this link will save you headaches. addyosmani.com/resources/essentialjsdesignpatterns/book/… — Tony
– Tony, Commented Sep 12, 2014 at 17:52
Check out the "Revealing Module Pattern" on the link I provided. I think it will get you in the right spot, though I use that link a lot it has helped me understand js patterns. I still run across some gatchas but it definitely will get you moving in the right direction. — Tony
– Tony, Commented Sep 12, 2014 at 17:58

Tony · Accepted Answer · 2014-09-12 17:56:27Z

The problem is that you are using the closure which executes immediately. This is taking the new 'obj' and placing the 'undefined' mod2 and stuffing it into the whichMod function. When you go to call that function later it has no way of updating its reference which was undefined. The reason 'this' works is because you are returning the actual closure which has access to the mod2 variable which you then define later. This allows the mod2 to be updated. Below is an example of it not getting updated.

jsFiddle: http://jsfiddle.net/lookitstony/fzsodx85/

var mod1, mod2;
mod2 = {};
mod2.whichMod = function(){ console.log('first') };

mod1 = (function (mod2) {
    var obj = {};
    obj.whichMod = function () {
        mod2.whichMod();
    };
    return obj;
}(mod2));

mod2 = (function (mod1) {
    var obj = {};
    obj.whichMod = function () {
        console.log('mod2');
    }
    return obj;
}(mod1));

$(function(){
mod1.whichMod(); // mod2 did not exist so its using the one defined above
mod2.whichMod(); // mod2 is now overwritten but....
mod1.whichMod(); // mod1 still has the original object passed in
});

Collectives™ on Stack Overflow

Using module pattern, why reference is undefined?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related