JavaScript namespace with Singleton usage? I'm stumped!

Question

Hey everyone,

This is my first post on StackOverflow. This community has provided me with some great insights into lots of different coding questions over the years. So since I've been stuck on this particular task in JS for days, I decided I'd lean on this great community and see what sort of help I could get on my question.

I saw a pretty good post here that actually was close to what I want (post here), but unfortunately I need to create multiple instances of an Object that is within a namespace, which that example doesn't help with.

Here's what I am attempting to do:

if (!myNamespace) {
  var myNamespace = {};
}

// Object for my namesapce
myNamespace.Item = function() { 
    return  {

        Initialize: function(title,details) {   
            // setting members of this Object
            this.title = title;   
            this.details = details;

        },

        Display: function() {
            this.Position();
            this.Show();    
        },

        Position: function() {
            // position my item in the DOM          
        },

        Show: function() {
            // show my item in the DOM          
        }
    };
}();    

// another Object for my namesapce
myNamespace.Basket = function()  {  
    return  {       
        Initialize: function(title,details,code) {  
            // setting members of this Object
            this.items = [];   
        },
        Add: function(item) {   
            this.items[items.length] = item;                
        }
    };
}();

var Item = new myNamespace.Item;  // the code fails to create a new instance of this Object
Item.Initialize("New Item Title","New Item Desc.");
Item.Display();

var Item2 = new myNamespace.Item;  // the code fails to create a new instance of this Object
Item2.Initialize("New Item Title2","New Item Desc. 2");
Item2.Display();

I'm fairly sure I am thinking of Singleton vs. Class incorrectly. A nice code example with the correct nesting/structure would help SO much! THANKS IN ADVANCE!

Answer 1

Your code defines an object literal, and returns it, it seems like. That isn't what you want. In the constructor definition, just assign properties to 'this'. The 'new' keyword will make sure that a new object is created, set as 'this' during the constructor, and returned by the call.

if (!myNamespace) {
  var myNamespace = {};
}

myNamespace.Item = function() {
    this.x = 10;
};

var item = new myNamespace.Item();
alert(item.x);

This is a normal object constructor in a namespace. If you want a singleton pattern, try something like this:

if (!myNamespace) {
  var myNamespace = {};
}

myNamespace.get = function() {
    if (typeof(this.singleton) === 'undefined') {
        var Item = function() {
            this.x = 10;
        };
        this.singleton = new Item();
    }
    return this.singleton;
}

var item = myNamespace.get();
alert(item.x);

Answer 2

The problem is that myNamespace.Item is not a function, is an object, because you have a function that is immediately executed.

You can for example, add the methods to the current object:

myNamespace.Item = function() { 
  this.initialize = function(title,details,code) {  
    // setting members of this Object
    this.title = title;   
    this.details = details;
    this.code = code;
  };

  this.display = function() {
    this.Position();
    this.Show();    
  };

  this.position = function() {
    // position my item in the DOM          
  };

  this.show = function() {
    // show my item in the DOM          
  }
};

Or use the prototype property of the constructor function, to make the object instances created with the new operator inherit those methods:

// Object for my namesapce
myNamespace.Item = function() {
  // constructor logic
};    

myNamespace.Item.prototype.initialize = function(title,details,code) {  
  // setting members of this Object
  this.title = title;   
  this.details = details;
  this.code = code;
};

myNamespace.Item.prototype.display = function() {
  this.Position();
  this.Show();    
};

myNamespace.Item.prototype.position = function() {
  // position my item in the DOM          
};

myNamespace.Item.prototype.show = function() {
  // show my item in the DOM          
};

Or a slightly shorter syntax:

myNamespace.Item = function() { };

myNamespace.Item.prototype = {
  initialize: function(title,details,code) {  
    // setting members of this Object
    this.title = title;   
    this.details = details;
    this.code = code;
  },
  display: function() {
    this.Position();
    this.Show();    
  },
  position: function() {
    // position my item in the DOM          
  },
  show: function() {
    // show my item in the DOM          
  },
  constructor: myNamespace.Item // fix the constructor property
};

The benefit of using the prototype property is that the methods exist only in the myNamespace.Item.prototype object, while in the first example, each object will have its own function instances which is less memory-efficient.