Design patterns in JavaScript: Singleton

Written by Arash Karimzadeh

Friday, 13 February 2009 07:22

Singleton pattern is a very popular pattern.It is used when you want a unique instance in your application to handle a functionality and it provides you with a common access point to that unique instance.

You can implement Singleton pattern in javascript in different ways. Here we try to design it the way you usually do in object oreinted language such as C#.

What we will do is

Define Constructor
Make it Singleton
When can we use this pattern

Define Constructor

First of all lets define a constructor for our class.As we discuss it in the previous article, you can create a class constructor by defining a function and using new keyword when you are calling the function. So our code would be something like this:

singleton = function(id,name){
this.id = id;
this.name = name;
}
var firstInstance = new singleton(1,'Bob');
var secondInstance = new singleton(2,'Glen');

This will create an instance of singleton and set its id to 1 and the name property to Bob, and the second instantiation of singleton will set its id to 2 and the name property to Glen.

Make it Singleton

In other languages we used a static property to hold the value of the unique instance. Here we can do the same thing by using function properties.

// use singleton.property = something to hold the instance
singleton = function(id,name){
this.id = id;
this.name = name;
singleton.instance = this;
}

This will hold the created instance in singleton.instance property. Now all we have to do is to return that instance in the second instantiation.

singleton = function(id,name){
if(singleton.instance !== undefined)
return singleton.instance;
this.id = id;
this.name = name;
singleton.instance = this;
}

Let's see how it works.

var firstInstance = new singleton(1,'Bob');
var secondInstance = new singleton(2,'Glen');
alert(secondInstance.name); //yield Bob
//As it shows both refer to one instance
secondInstance.name = 'Adam';
alert(firstInstance.name); //yield Adam

In first call it checks if singleton.instance is not undefined (which is undefined now) so it will create an instance and set its id and name to 1 and Bob.
Then it will set instance property of singleton to this by singleton.instance = this. singleton.instance work as static property of a class.
In the second instantiation it checks if singleton.instance is not undefined (which is defined in previous instantiation) so it will return singleton.instance which refer to previous instance.

As it shows both instance are referring to the same object.

When can we use this pattern

You can use it when you need exactly one instance of a class and it must be initiated by parameters.

For example think about userAgent which is responsible to detect browser typ. This object does not to be instantiated each time.

userAgent = function(){
if(userAgent.instance !== undefined)
return userAgent.instance;
this.ns = typeof document.layers != 'undefined';
this.ie = typeof document.all != 'undefined';
this.ff = typeof document.getElementById != 'undefined';
userAgent.instance = this;
}
var agent = new userAgent()

Tags: Design Patterns | JavaScript

Last Updated on Thursday, 19 February 2009 20:16