Home > Javascript > JavaScript Singleton pattern

JavaScript Singleton pattern

The simplest design pattern of all would probably be the Singleton. The essence of the singleton pattern is that when you reference a singleton object from two or more clients, the exact same reference is passed back to each client.  Just to be clear, from the purist perspective, we are talking about a specific instantiation of a given class.  That should be ringing bells about now.  In JavaScript, there are no classes.  Consequently, the Singleton pattern is a triviality in JavaScript.  There are no class instantiations but rather a collection of objects (hash tables) floating around.  Our implementation of the Singleton pattern in JavaScript is now reduced to ensuring that the same object reference is picked from this collection.  How do we do that? Well, it’s as easy as the following code:

var mySingleton = {
isSingleton: true,
value: 1
};

In this code, anytime you access “mySingleton“, you are guaranteed to get the same object reference back. We’re done. That’s all there is to it…

But we can do better
The problem with using an object literal is that it is publicly visible.  The object as well as its properties can be changed by anyone at anytime – inadvertently or otherwise.  A better approach would be to wrap an instance of a singleton within a closure (see the article I wrote on closures)  In a nutshell, we’ll create a function (our closure) and declare a (private) instance variable. Consider the following code:

function MySingleton() {
var instance;

/* rewrite the constructor - called after 1st invocation*/
MySingleton = function () {
return instance;
};

/* first invocation establishes context */
MySingleton.prototype = this;

/* ensure we're creating with "new" */
instance = new MySingleton();
instance.constructor = MySingleton;

/* initialize instance here...
e.g. instance.property1 = true;
*/

return instance;
}

var s1 = new MySingleton(), s2 = MySingleton();
console.log(s1 === s2);

Using this approach, we have “privatized” our instance variable, we’ve ensured that our instance references the prototype of the initial invocation, and most importantly, we have rewritten the original function to the following:


MySingleton = function () {
return instance;
}

The original function is inaccessible, but the stack frame and its variables remain visible to our new constructor (via closure).

The only thing we have to worry about…
We can still overwrite our overwritten constructor. There is nothing that prevents our code from something like the following:

MySingleton = 3;

ECMA Script 5 has some really cool features to help us lock this down. More on that in a later post.

Also, to access our singleton object, we must invoke its constructor. In other words, our syntax must end with parenthesis remember, it is a method that’s providing our singleton functionality.

 

About these ads
Categories: Javascript
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: