dhtmldev.com

Although JavaScript cannot truly implement the Singleton pattern, because JavaScript is not an object-oriented language, you can simulate a benefit of the Singleton pattern by using an anonymous function to create a new object stored in a global variable.

Table of Contents

1. The Singleton Pattern in JavaScript
2. The Anonymous Function is Key
3. Using Anonymous Functions

The Singleton Pattern in JavaScript

JavaScript programs are usually simple enough to manage that the Singleton pattern is not absolutely needed. But it is good practice to use it anyway to clarify code. If a program requires only one instance of an object, why not write the code to make that requirement clear? If you use an object-oriented approach for your JavaScript code, then following the method described in this article will help clarify which functions are for creating single(ton) objects and which functions are for creating multiple objects. The key is to use anonymous functions to create any objects that should be limited to a single instance in your program.

The Singleton pattern can be simulated in JavaScript by:

• Using an anonymous constructor to create a function object
• And saving the returned object in a variable

For example:

var mySingleton = new function()
{ //do something useful
}

The Anonymous Function is Key

Anonymous functions are key in our implementation of the Singleton pattern; because they have no name, they cannot be called more than once. The "[not] more than once" part is what we want.

Why Couldn't We Use a Named Function?

Normally a function has a name in its definition. For example, in this function, the name is "SingleObject" and comes after the keyword function and before the function call operator ().

// This is NOT an anonymous function,
//because it has a name, SingleObject
function SingleObject()
{ // do something useful
}

Because the function SingleObject has a name, it can be called more than once using it's name. Here's an example:

 
// First, define SingleObject
function SingleObject()
{ // do something useful
}
// Now use SingleObject more than once to create several of the same objects
// with each object stored in a different variable
var firstObject = SingleObject();
var secondObject = SingleObject();

Above, we can see that SingleObject was used to create two objects: firstObject and secondObject. Even though they are different instances they are the same object, returned from SingleObject. The whole idea of the Singleton pattern is to prevent having two of the same object. And the only way to prevent creating two of the same objects is to design our code so that the code in SingleObject can be called only one time, and the only way to that do is to use an anonymous function (that has no name).

Using Anonymous Functions

Because an anonymous function does not have a name, you must use the new keyword to make an instance of it and then, in order to use you new object later, you must store a reference to it in a variable through the assignment operator =, so you can refer to it later in your code.

// Use new keyword and store reference in a variable
var SingleObject = new function()
{ this.myMethod = function(){alert("My Method")}
}
 
// Now I can use my object, like so
SingleObject.myMethod();

The object created above with the anonymous function was stored in the variable SingleObject. This variable now holds a reference to our singleton object. Now our object's myMethod can be used with the dot operator and function call operator () like so: SingleObject.myMethod().

Note that above I use two anonymous functions. First to create my SingleObject object and also in my SingleObject definition to create my myMethod method. While it was not a requirement to use an anonymous function to create the myMethod method, it was convenient, because all the code fit on one line. It was a requirement, though, that I use an anonymous function to create my singleton object, SingleObject, so that the code creating the object could be called only once.