Revealing Module Pattern with a constructor

Question

I'm having a bit of trouble figuring out the best way to implement this.

I want a module that has a constructor that takes in an argument that stores it for later use within the module.

var ModuleB = function(moduleA) {
    this.moduleA = moduleA;
}

ModuleB.prototype = function() {
    //private stuff/functions
    function someMethod() {
        moduleA.doSomething();
    }

    //public api
    return {
        someMethod : someMethod
    };
}();

In some other file

//ModuleA defined elsewhere
var moduleA = new ModuleA();

//...

var module = new ModuleB(moduleA);
module.someMethod();

Now above in someMethod, moduleA is undefined, and this, is the global window object. Can someone explain how I would get access to moduleA? I don't understand what happens to this.moduleA = moduleA; after the constructor. I'm not really a javascript developer so if I'm using the wrong pattern here or something, feel free to chime in.

@Chase the only reason that fiddle works is because moduleA is global. — jbabey
– jbabey, Commented Aug 22, 2013 at 12:59

jbabey · Accepted Answer · 2013-08-22 13:10:30Z

10

You are very close, but you're missing something important in your definition of someMethod.

EDIT: is is easier to tell what works and what doesn't if you change the name of the module property in ModuleB:

var ModuleA = function() {}

ModuleA.prototype = (function () {
    return {
        someMethod: function () {
            return 'foo';
        }
    };
}());

var ModuleB = function(moduleA) {
    this.innerModule = moduleA;
}

ModuleB.prototype = (function () {
    return {
        doStuff: function () {
            return this.innerModule.someMethod();
        }
    };
}());

var moduleA = new ModuleA();

var moduleB = new ModuleB(moduleA);
console.log(moduleB.doStuff()); // prints "foo"

http://jsfiddle.net/mN8ae/1/

edited Aug 22, 2013 at 13:10

answered Aug 22, 2013 at 13:02

jbabey

46.8k12 gold badges73 silver badges94 bronze badges

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

2 Comments

Kyle Gobel Over a year ago

thank you for your example. In my real world situation the 'this' operator is not always the ModuleB object (idk, probably poor design by me I guess). Is there something I could change in this implementation to get it to work for those cases? Or would I be better off changing the areas that implement ModuleB. Example Here jsfiddle.net/QKZxh/1

jbabey Over a year ago

functions on the prototype should always have this point to the calling object

Adrian Salazar · Accepted Answer · 2013-08-22 13:11:35Z

1

Try this:

var ModuleB = function(moduleA) {
    this.moduleA = moduleA;
}

// Simplifying your code, what was missin is the "this" keyword accessing the moduleA
ModuleB.prototype.someMethod = function() {       
   this.moduleA.doSomething();
};


var module1 = new ModuleB({ 
    doSomething: function(){ 
         alert('i do something'); 
    } 
});

module1.someMethod();

edited Aug 22, 2013 at 13:11

answered Aug 22, 2013 at 12:59

Adrian Salazar

5,32936 silver badges52 bronze badges

4 Comments

jbabey Over a year ago

His prototype assignment is the return of an IIFE (an object), not a function.

Adrian Salazar Over a year ago

Yes but, as soon as you created ModuleB it contains a "prototype". If you overwrite the entire object, all the magic reference to moduleA will get lost

jbabey Over a year ago

moduleA is a property of each object instance, it has nothing to do with the prototype.

Filling The Stack is What I DO Over a year ago

To expand on @jbabey, moduleA becomes a property of a given object when it is passed as a parameter.So, the javascript process sees ModuleA when passed as a parameter like. var ModuleB = function(moduleA) { var moduleA; this.moduleA = moduleA; }

Arvind · Accepted Answer · 2014-02-26 14:48:50Z

0

You would need to use call/apply to execute the method for given context.

try this code (I have modified your code)

var ModuleB = function(moduleA) {
     this.moduleA = moduleA;
      };

 ModuleB.prototype = function() {
     //private stuff/functions
     function someMethod() {

         this.doSomething();
     }

     //public api
     return {
         someMethod : someMethod
     }; }();


 var ModuleA=function(){
     this.doSomething=function(){
      alert('moduleA Method');   
     }; };

 var modA=new ModuleA(); var modB=new ModuleB(modA);
 modB.someMethod.call(modA);

Thanks!

edited Feb 26, 2014 at 14:48

answered Feb 26, 2014 at 14:43

Arvind

613 bronze badges

Collectives™ on Stack Overflow

Revealing Module Pattern with a constructor

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related