19

I just read a few threads on the discussion of singleton design in javascript. I'm 100% new to the Design Pattern stuff but as I see since a Singleton by definition won't have the need to be instantiated, conceptually if it's not to be instantiated, in my opinion it doesn't have to be treated like conventional objects which are created from a blueprint(classes). So my wonder is why not just think of a singleton just as something statically available that is wrapped in some sort of scope and that should be all.

From the threads I saw, most of them make a singleton though traditional javascript

new function(){} 

followed by making a pseudo constructor.

Well I just think an object literal is enough enough:

var singleton = {
   dothis: function(){},
   dothat: function(){}
}

right? Or anybody got better insights?

[update] : Again my point is why don't people just use a simpler way to make singletons in javascript as I showed in the second snippet, if there's an absolute reason please tell me. I'm usually afraid of this kind of situation that I simplify things to much :D

1
  • 2
    dothis and dothat remind me of Borat
    – user142019
    Jun 11, 2010 at 18:02

11 Answers 11

31

I agree with you, the simplest way is to use a object literal, but if you want private members, you could implement taking advantage of closures:

var myInstance = (function() {
  var privateVar;

  function privateMethod () {
    // ...
  }

  return { // public interface
    publicMethod1: function () {
      // private members can be accessed here
    },
    publicMethod2: function () {
      // ...
    }
  };
})();

About the new function(){} construct, it will simply use an anonymous function as a constructor function, the context inside that function will be a new object that will be returned.

Edit: In response to the @J5's comment, that is simple to do, actually I think that this can be a nice example for using a Lazy Function Definition pattern:

function singleton() {
  var instance = (function() {
    var privateVar;

    function privateMethod () {
      // ...
    }

    return { // public interface
      publicMethod1: function () {
          // private members can be accessed here
       },
      publicMethod2: function () {
        // ...
      }
    };
  })();

  singleton = function () { // re-define the function for subsequent calls
    return instance;
  };

  return singleton(); // call the new function
}

When the function is called the first time, I make the object instance, and reassign singleton to a new function which has that object instance in it's closure.

Before the end of the first time call I execute the re-defined singleton function that will return the created instance.

Following calls to the singleton function will simply return the instance that is stored in it's closure, because the new function is the one that will be executed.

You can prove that by comparing the object returned:

singleton() == singleton(); // true

The == operator for objects will return true only if the object reference of both operands is the same, it will return false even if the objects are identical but they are two different instances:

({}) == ({}); // false
new Object() == new Object(); // false
8
  • @CMS: private members do make sense in a singleton and that can't be achieved with simple object literal. Thanks.
    – Shawn
    Dec 13, 2009 at 6:09
  • @CMS: I guess that's Douglas code. To a singleton definition that's only a unnecessary round trip to me. Closure is good enough I think.
    – Shawn
    Dec 13, 2009 at 6:12
  • @Shawn: Yes, I mentioned that only because virtually any object instance can be reproduced, breaking the concept of "singleton"... Dec 13, 2009 at 6:25
  • @CMS: There might be a trivial difference. That using createObject(o) to 'clone' an object by using o as as the prototype for the new object is more like distributing o's implementation(because prototype is a reference). Really it's not a singleton. But the former example with closer is I think.
    – Shawn
    Dec 13, 2009 at 6:34
  • @CMS this doesn't imlpement the singleton pattern. The singleton pattern requires that you be able to get the same singleton object again by calling a method
    – J5.
    Dec 13, 2009 at 17:10
3

I have used the second version (var singleton = {};) for everything from Firefox extensions to websites, and it works really well. One good idea is to not define things inside the curly brackets, but outside it using the name of the object, like so:

var singleton = {};
singleton.dothis = function(){

};
singleton.someVariable = 5;
3
  • You're using the 'free style' of object literal notation. Same stuff. I personally also found this the most appeal. Probably because it can't be simpler and it looks quite naturall. Don't you think? : D
    – Shawn
    Dec 13, 2009 at 6:14
  • Plus seems only in javascript you can do this. That's a bless.
    – Shawn
    Dec 13, 2009 at 6:17
  • 1
    Doesn't this declare a bunch of methods even when the singleton is never used?
    – EricG
    Oct 10, 2012 at 13:12
3

The ES5 spec lets us use Object.create():

var SingletonClass = (function() {
    var instance;
    function SingletonClass() {
        if (instance == null) {
            instance = Object.create(SingletonClass.prototype);
        }

        return instance;
    }

    return {
        getInstance: function() {
            return new SingletonClass();
        }
   };
})();

var x = SingletonClass.getInstance();
var y = SingletonClass.getInstance();
var z = new x.constructor();

This is nice, since we don't have to worry about our constructor leaking, we still always end up with the same instance.

This structure also has the advantage that our Singleton doesn't construct itself until it is required. Additionally, using the closure as we do here prevents external code from using our "instance" variable, accidentally or otherwise. We can build more private variables in the same place and we can define anything we care to export publically on our class prototype.

1

The singleton pattern is implemented by creating a class with a method that creates a new instance of the class if one does not exist. If an instance already exists, it simply returns a reference to that object. 1

(function (global) {

     var singleton;

     function Singleton () {
         // singleton does have a constructor that should only be used once    
         this.foo = "bar";
         delete Singleton; // disappear the constructor if you want
     }

     global.singleton = function () {
         return singleton || (singleton = new Singleton());
     };

})(window);

var s = singleton();
console.log(s.foo);

var y = singleton();
y.foo = "foo";
console.log(s.foo);

You don't just declare the singleton as an object because that instantiates it, it doesn't declare it. It also doesn't provide a mechanism for code that doesn't know about a previous reference to the singleton to retrieve it. The singleton is not the object/class that is returned by the singleton, it's a structure. This is similar to how closured variables are not closures, the function scope providing the closure is the closure.

1
  • Deleting the constructor function doesn't really much help to avoid using it again, since a reference to the constructor function is available on the object that has been created with, eg.: var z = new y.constructor(); Dec 13, 2009 at 18:19
1

I am just posting this answer for people who are looking for a reliable source.

according to patterns.dev by Lydia Hallie, Addy Osmani

Singletons are actually considered an anti-pattern, and can (or.. should) be avoided in JavaScript. In many programming languages, such as Java or C++, it's not possible to directly create objects the way we can in JavaScript. In those object-oriented programming languages, we need to create a class, which creates an object. That created object has the value of the instance of the class, just like the value of instance in the JavaScript example. Since we can directly create objects in JavaScript, we can simply use a regular object to achieve the exact same result.

0

I've wondered about this too, but just defining an object with functions in it seems reasonable to me. No sense creating a constructor that nobody's ever supposed to call, to create an object with no prototype, when you can just define the object directly.

On the other hand, if you want your singleton to be an instance of some existing "class" -- that is, you want it to have some other object as its prototype -- then you do need to use a constructor function, so that you can set its prototype property before calling it.

2
  • I think prototype still works on my second example, just to add singleton.prototype = someOtherObject; coz in javascript there's actually no such thing as a class, what people call a class is pseudo, in a sense that they actually are no difference than literally declared Classes.
    – Shawn
    Dec 13, 2009 at 5:47
  • The prototype property only applies to functions (constructors). Objects have an internal [[Prototype]] property that references the constructor's prototype object. To change the prototype, you need a reference to the function that constructed the object. Dec 13, 2009 at 6:02
0

The latter code box shows what I've seen JS devs call their version of OO design in Javascript.

Singetons are meant to be singular objects that can't be constructed (except, I suppose, in the initial definition. You have one, global instance of a singleton.

3
  • The second example is an object, not a function, so it can't be used with new.
    – Wyzard
    Dec 13, 2009 at 5:35
  • @Isaac: I don't think you can use new on the second example. The point was I think the var singleton = {} code should be a better and more natural declaration of a singleton.
    – Shawn
    Dec 13, 2009 at 5:38
  • Thanks for the clear up! I'm still getting into JS myself. I'll edit that nonsense out.
    – Isaac
    Dec 13, 2009 at 5:41
0

The point of using the "pseudo constructor" is that it creates a new variable scope. You can declare local variables inside the function that are available inside any nested functions but not from the global scope.

There are actually two ways of doing it. You can call the function with new like in your example, or just call the function directly. There are slight differences in how you would write the code, but they are essentially equivalent.

Your second example could be written like this:

var singleton = new function () {
    var privateVariable = 42; // This can be accessed by dothis and dothat

    this.dothis = function () {
        return privateVariable;
    };

    this.dothat = function () {};
}; // Parentheses are allowed, but not necessary unless you are passing parameters

or

var singleton = (function () {
    var privateVariable = 42; // This can be accessed by dothis and dothat

    return {
        dothis: function () {
            return privateVariable;
        },

        dothat: function () {}
    };
})(); // Parentheses are required here since we are calling the function

You could also pass arguments to either function (you would need to add parentheses to the first example).

10
  • @Matthew: Thanks. Your second example looks more approaching to me. Seeing from the syntax itself, it maps closer to the 'singleton' concept. The first one looks a bit unnatural to me because it's actually a conventional object just being named a 'singleton'. Thanks for the clarification tho.
    – Shawn
    Dec 13, 2009 at 6:07
  • @Matthew ... this construct just looks like a closure to me. There is no way for later code to get the singleton other than the existing object reference. If that object reference is closured, it will be 100% impossible to use the singleton from a different scope.
    – J5.
    Dec 13, 2009 at 14:55
  • 1
    @J5: It is a closure. I'm not sure what you're referring to at the end. Are you talking about singleton? As long as you declare it in the global scope, you can use it anywhere. Dec 13, 2009 at 18:19
  • Singleton isn't an object, it's a structure which allows returning a reference to the same object by calling the same method, but not requiring that a prior reference be re-used.
    – J5.
    Dec 14, 2009 at 18:49
  • 2
    Usually when I've seen the term "singleton" used in the context of JavaScript, it's used as a synonym of the module pattern, not the singleton design pattern from the GoF. Re-reading the question though, I'm not sure that's what he meant. Dec 14, 2009 at 20:42
0

Crockford (seems to) agree that the object literal is all you need for a singleton in JavaScript:

http://webcache.googleusercontent.com/search?q=cache:-j5RwC92YU8J:www.crockford.com/codecamp/The%2520Good%2520Parts%2520ppt/5%2520functional.ppt+singleton+site:www.crockford.com&cd=1&hl=en&ct=clnk

0

How about this:

function Singleton() {

    // ---------------
    // Singleton part.
    // ---------------

    var _className = null;
    var _globalScope = null;

    if ( !(this instanceof arguments.callee) ) {
        throw new Error("Constructor called as a function.");
    }

    if ( !(_className = arguments.callee.name) ) {
        throw new Error("Unable to determine class name.")
    }

    _globalScope = (function(){return this;}).call(null);

    if ( !_globalScope.singletons ) {
        _globalScope.singletons = [];
    }

    if ( _globalScope.singletons[_className] ) {
        return _globalScope.singletons[_className];
    } else {
        _globalScope.singletons[_className] = this;
    }

    // ------------
    // Normal part.
    // ------------

    var _x = null;

    this.setx = function(val) {
        _x = val;
    }; // setx()

    this.getx = function() {
        return _x;
    }; // getx()

    function _init() {
        _x = 0; // Whatever initialisation here.
    } // _init()
    _init();

} // Singleton()

    var p = new Singleton;
    var q = new Singleton;

    p.setx(15);
    q.getx(); // returns 15
0

I stole this from CMS / CMS' answer, and changed it so it can be invoked as:

MySingleton.getInstance().publicMethod1();

With the slight alternation:

var MySingleton = {                // These two lines

    getInstance: function() {      // These two lines

      var instance = (function() {

        var privateVar;

        function privateMethod () {
          // ...
          console.log( "b" );
        }

        return { // public interface
          publicMethod1: function () {
              // private members can be accessed here
              console.log( "a" );
           },
          publicMethod2: function () {
            // ...
            privateMethod();
          }
        };
      })();

      singleton = function () { // re-define the function for subsequent calls
        return instance;
      };

      return singleton(); // call the new function
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.