JavaScript singleton with methods and properties

Question

I am diving deeper into JavaScript and starting to learn more about prototypes and simulating classes etc. I am used to working with the Module pattern and would like to try and combine this pattern along with working with prototyping into an own little framework (purely for learning purposes).

I have devised a little construct and I was hoping if some of you advanced users could give me some feedback on the particular construct.

What I am trying to achieve is to create a singleton with methods and properties one could access, I would like to extend/build this via the prototype as speed is something I care a lot about. The thing I still have doubts about is whether or not this would be a suitable construct for what I have in mind, whether or not this would be fast etc.

Much appreciated! Here's the code.

var Mui = (function (window, document, undefined) {

Mui = function () {
    this.Version = {
        Major  : '0',
        Minor  : '1',
        Bugfix : '0'
    };
};

Mui.prototype = {
    sayHi : function () {
        alert('hi');
    }
};

return new Mui;

}(window, this.document));

Answer 1

A singleton is an object which is the only instance of its type. Therefore, it makes most sense to define all non-function properties and methods directly on that singleton:

var singleton = {
    prop1: ...,
    prop2: ...,
    method1: function () { ... },
    method2: function () { ... }
};

Extending the singleton is easy:

singleton.prop3 = ...;
singleton.method3 = ...;  

Answer 2

If you want you constructor function to be a singleton, you are going to have to make a few tweaks to your code:

var Mui = function () {
    //the cached instance
    var instance;

    //rewrite the constructor
    Mui = function Mui() {
        return instance;
    };

    //carry over the prototype properties
    Mui.prototype = this;

    //the instance
    instance = new Mui();

    //reset the constructor pointer
    instance.constructor = Mui;

    //all the functionality
    instance.version = {
        Major  : '0',
        Minor  : '1',
        Bugfix : '0'
    };
    return instance;
};

Mui.prototype.sayHi = function() {
    alert('Hi');
};

var mui_1 = new Mui();
var mui_2 = new Mui();
alert(mui_1 === mui_2); //true​

You can see this working here: http://jsfiddle.net/34vCH/3/

Answer 3

I agree with Šime Vidas; simplicity is best here.

var mui = {

    version: {
        major  : '0',
        minor  : '1',
        bugfix : '0'
    },

    sayHi : function () {
        alert('hi');
    }

};

There is no reason to use a constructor, since it will only construct a single object. Best to create the object directly.

On a side note, don't use this to refer to the global object. document would work just as well as this.document.