Difference between Revealing Module Pattern and simple Constructor

Question

Googled but did not find appropriate resource to explain the difference between using Revealing Module Pattern and this keyword.

When using revealing module pattern I can have the below code :

var moduleRevealing = function() {
    var talk = function() {
      console.log("Talking....");
    };
    var walk = function() {
      console.log("Walking...");
    };
    return {
      talk: talk,
      walk: walk
    }
  };

  console.log('Module Pattern Object');
  console.log(moduleRevealing());

Now the same thing can be achieved using this keyword as below:

var module = function() {
    var talk = function() {
      console.log("Talking....");
    };
    this.walk = function() {
      console.log("Walking...");
    };
    this.talk = talk;
  };
  var mod1 = new module();
  console.log('Module Object');
  console.log(mod1);

How are both different? I can only see one difference and that is the __proto; The former points to Object while the later is module.

In case someone want's to see the code - Fiddle

That `moduleRevealing` function should not be called with `new`. Where did you find such a thing? — Bergi, Feb 23 '16 at 15:56
@Bergi Thank you for pointing that out. My mistake, corrected it. It did not make sense when I am returning an object. — Shubh, Feb 23 '16 at 16:17
Btw, yes, that prototype inheritance is all the difference between a factory function and a constructor. If there are no properties to inherit, you should use a factory. — Bergi, Feb 23 '16 at 16:23

score 3 · Accepted Answer · edited May 23 '17 at 11:45

In your simple example there is no difference, but let me make it just a little more complicated.

var moduleRevealing = function() {
    var talk = function() {
      console.log("Talking....");
    };
    var walk = function() {
      console.log("Walking...");
    };
    var walkAndTalk = function(){
      walk();
      talk();
    };
    return {
      talk: talk,
      walk: walk,
      walkAndTalk: walkAndTalk
    }
  };

Using this,

var module = function() {
    var talk = function() {
      console.log("Talking....");
    };
    this.walk = function() {
      console.log("Walking...");
    };
    this.talk = talk;
    this.walkAndTalk = function(){
      this.walk();
      this.talk();
    }
  };

These two slightly more complicated examples now have very different behavior when you override their methods.

var modR = moduleRevealing();
var mod1 = new module();
modR.walk = function() {console.log('FAST Walking...");}
mod1.walk = function() {console.log('FAST Walking...");}

modR.walk(); // outputs "FAST Walking..."
modl.walk(); // outputs "FAST Walking..."

modR.walkAndTalk(); // outputs "Walking ... Talking..."
mod1.walkAndTalk(); // outputs "FAST Walking...Talking..."

Note that even though walk()'s output is changed When you override an instance created using Revealing Module, that change isn't picked up by the dependent method walkAndTalk(). The underlying reason is that the Revealing Module pattern encourages the indiscriminate use of javaScript closures for people who haven't bothered to learn this properly. See this post of mine for a comparison of difference between module pattern variants.

score 0 · Answer 2 · answered Feb 23 '16 at 15:38

0

In your example, there is effectively no difference (except for the subtleties of constructor etc.) Both return an object with a new copy of each method attached. If talk and walk were part of module.prototype, that would be different.

answered Feb 23 '16 at 15:38

Evan Davis

35,493
6
50
57

Difference between Revealing Module Pattern and simple Constructor

2 Answers2