Javascript: best Singleton pattern [duplicate]

Question

Possible Duplicate:
Simplest/Cleanest way to implement singleton in JavaScript?

I'm using this pattern for singletons, in the example the singleton is PlanetEarth:

var NAMESPACE = function () {

    var privateFunction1 = function () {
        privateFunction2();
    };

    var privateFunction2 = function () {
        alert('I\'m private!');
    };

    var Constructors = {};

    Constructors.PlanetEarth = function () {
        privateFunction1();
        privateFunction2();
    };

    Constructors.PlanetEarth.prototype = {
        someMethod: function () {
            if (console && console.log) {
                console.log('some method');             
            }
        }
    };

    Constructors.Person = function (name, address) {
        this.name = name;
        this.address = address;
    };

    Constructors.Person.prototype = {
        walk: function () {
            alert('STOMP!');
        }
    };

    return {
        Person: Constructors.Person, // there can be many
        PlanetEarth: new Constructors.PlanetEarth() // there can only be one!
    };

}();

Since PlanetEarth's constructor remains private, there can only be one.

Now, something tells me that this self-cooked thing isn't the best one can do, mostly because I don't have an academic education and I tend to solve problems in stupid ways. What would you propose as a better alternative my method, where better is defined as stylistically better and/or more powerful?

tomasdev · Accepted Answer · 2019-01-03 05:52:51Z

181

(1) UPDATE 2019: ES7 Version

class Singleton {
    static instance;

    constructor() {
        if (instance) {
            return instance;
        }

        this.instance = this;
    }

    foo() {
        // ...
    }
}

console.log(new Singleton() === new Singleton());

(2) ES6 Version

class Singleton {
    constructor() {
        const instance = this.constructor.instance;
        if (instance) {
            return instance;
        }

        this.constructor.instance = this;
    }

    foo() {
        // ...
    }
}

console.log(new Singleton() === new Singleton());

Best solution found: http://code.google.com/p/jslibs/wiki/JavascriptTips#Singleton_pattern

function MySingletonClass () {

  if (arguments.callee._singletonInstance) {
    return arguments.callee._singletonInstance;
  }

  arguments.callee._singletonInstance = this;

  this.Foo = function () {
    // ...
  };
}

var a = new MySingletonClass();
var b = MySingletonClass();
console.log( a === b ); // prints: true

For those who want the strict version:

(function (global) {
  "use strict";
  var MySingletonClass = function () {

    if (MySingletonClass.prototype._singletonInstance) {
      return MySingletonClass.prototype._singletonInstance;
    }

    MySingletonClass.prototype._singletonInstance = this;

    this.Foo = function() {
      // ...
    };
  };

var a = new MySingletonClass();
var b = MySingletonClass();
global.result = a === b;

} (window));

console.log(result);

edited Jan 3, 2019 at 5:52

answered Jul 18, 2011 at 13:49

tomasdev

6,0011 gold badge35 silver badges40 bronze badges

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

21 Comments

tomasdev Over a year ago

@shahalpk please refer to the strict mode option, where no arguments.callee (not valid in strict mode) is used. this is never the prototype. That's basically why.

spirit walker Over a year ago

This strict mode version does not work if you instantiate 'b' before 'a'.

Diego Over a year ago

Is there a way to do this without using new? In your example you do a = new Singleton which is kind of counter-intuitive. shouldn't it be something like a = Singleton.getInstance() and then b= Singleton.getInstance()??

N K Over a year ago

What if I called MySingletonClass() and then new MySingletonClass()??? It will produce a Window object.

tomasdev Over a year ago

@endavid Chrome 71 does not yet support ES7 static properties. Only ES6. See next solution.

|

bobince · Accepted Answer · 2009-10-28 11:20:01Z

24

Why use a constructor and prototyping for a single object?

The above is equivalent to:

var earth= {
    someMethod: function () {
        if (console && console.log)
            console.log('some method');                             
    }
};
privateFunction1();
privateFunction2();

return {
    Person: Constructors.Person,
    PlanetEarth: earth
};

answered Oct 28, 2009 at 11:20

bobince

538k111 gold badges675 silver badges846 bronze badges

5 Comments

defines Over a year ago

If this is included on a page twice, the latest object will overwrite the earlier. In practice, it happens - sometimes with unexpected consequences. Singleton closure pattern prevents this. So, if you distribute a script/library it will gracefully handle misuse by others who use it. Most of Google's API libraries do this for just that reason. Say I use Google Maps on a site, but want to install a widget by some third party which also includes the maps library explicitly. Should I have to change third party code, or should the library itself gracefully handle this?

chees Over a year ago

it won't overwrite if you use: var earth = earth || { .... };

mwilcox Over a year ago

It also won't overwrite it if you're using a proper file manager, like requirejs.

Jos Over a year ago

"It won't if"... please, anyone still could overwrite the singleton by e.g. injecting javascript trough a bookmarklet/favlet when not using the closure pattern. It's not just about you using your own code properly, but also about avoiding malicious attacks.

bobince Over a year ago

? You cannot possibly do anything to defend against "attacks". If someone has injected code into your JS origin you have already totally lost. JavaScript was not designed to offer security boundaries inside an origin.

Community · Accepted Answer · 2017-05-23 12:02:13Z

18

Extending the above post by Tom, if you need a class type declaration and access the singleton instance using a variable, the code below might be of help. I like this notation as the code is little self guiding.

function SingletonClass(){
    if ( arguments.callee.instance )
        return arguments.callee.instance;
    arguments.callee.instance = this;
}


SingletonClass.getInstance = function() {
    var singletonClass = new SingletonClass();
    return singletonClass;
};

To access the singleton, you would

var singleTon = SingletonClass.getInstance();

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Jul 29, 2011 at 17:31

arunpon

3822 silver badges6 bronze badges

1 Comment

defines Over a year ago

Really, one should try to avoid using 'callee' - from the MDN JavaScript strict mode reference (explaining why callee is not supported in strict mode) - "In normal code arguments.callee refers to the enclosing function. This use case is weak: simply name the enclosing function! Moreover, arguments.callee substantially hinders optimizations like inlining functions, because it must be made possible to provide a reference to the un-inlined function if arguments.callee is accessed."

Collectives™ on Stack Overflow

Javascript: best Singleton pattern [duplicate]

3 Answers 3

21 Comments

5 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

21 Comments

5 Comments

1 Comment

Linked

Related