Take the 2-minute tour ×

When I try and make different instances of this module, it does not work.

It seems to be a singleton. I can only have one instance at a time.

What mechanism limits the constructor function publik() to only have on instance?


var Module = ( function ()
    var publik = function ( )
    publik.prototype.get = function()
        document.getElementById( 'a'+test ).innerHTML = test;
    publik.prototype.set = function( value )
         test = value;
    return publik;
} ) ();

var object1 = new Module();
var object2 = new Module();


share|improve this question

3 Answers 3

up vote 3 down vote accepted

The short answer: closure.

The long answer (if I have it right, please comment so I can correct):

  1. Your Module var is a executed immediately when the script loads. (denoted by the parenthesis around the function.)()

  2. In that module, your publik var is declared and it's left in the closure even when the function completes!

  3. With subsequent calls, you still access that one Module that was auto-executed. And it always gets that same closure space and function scope and the same object, in short - so your publik variable is actually always the same one.

share|improve this answer
So each time I call new it is not really a new function-object, it is the same one? –  CS_2013 May 21 '12 at 19:30
Yes. To be more correct, when you enclose a function in (function(){}()) pattern, it is automatically executed on the load time and the result is placed in its place. So your script in the end looks like (internally) var Module = YourObjectWithGetAndSetMethods; And when you do a var x = Module(); You're calling an object that is already instantiated and therefore with instantiated publik variable. –  Zlatko May 22 '12 at 9:02
Seems like a bogus pattern to me. It "breaks" the meaning of the keyword "new". Do you agree? If so why do people use this? I obviously did not invent it. –  CS_2013 May 23 '12 at 13:49
Singletons are very useful in JavaScript. You can, of course, also use a constructor pattern. Here, I wrote it down: zlayer.net/blog/?p=211 –  Zlatko May 24 '12 at 9:38
And regarding bogus pattern, you're not supposed to use "new" with singletons. Singletons are useful when you're creating an application, you can use your own namespace. Take YUI or jQuery, for example. If "$" (or "YUI") object wasn't singleton, then any jQuery module file would initialize its own "$". And you would have to use firstYUI.onePlugin and secondYUI.otherPlugin... Going singleton way, you only have one YUI object and all "plugins" or widgets or whatever are bound inside that. –  Zlatko May 24 '12 at 9:43

The module pattern is not meant to be used in the manner you've described. It's used to create one module and hide state from outside code, i.e. you expose one public interface with which outside code can communicate but you keep the rest hidden.

This prevents other code from relying on variables or functions you are using internally, as they would break when you rename anything.

Also, a module is supposed to be singleton; to have multiple identical modules is like having two identical classes in your code ... doesn't make sense.

This is how a module pattern should look like.

var Module = (function($) {
    // the $ symbol is an imported alias

    // private variable
    var id = 0;

    // private function
    function increaseId()
        return ++id;

    // return public interface
    return {
        nextId: function() {
            // we have access to the private function here
            // as well as the private variable (btw)
            return increaseId();
}(jQuery)); // we import jQuery as a global symbol

Module.nextId(); // 1
Module.nextId(); // 2
Module.id; // undefined
Module.increaseId(); // error

You see how only .nextId() is exposed, but none of the other private variables / functions.

share|improve this answer

Try rewriting the Module class so that you can use it to create different instances. You may want to alter the "test" property to be a static property as I have changed it for you.

var Module = function(){}

    Module.prototype.get = function()
       document.getElementById( 'a'+this.test ).innerHTML = this.test;
    Module.prototype.set = function( value )
       this.test = value;
share|improve this answer
I've used this before but don't like the style b.c. there are no encompassing brackets. –  CS_2013 May 21 '12 at 19:29

Your Answer


