Prefered way to make a JavaScript Object

Question

There are two ways (that I know of) to create a JavaScript object. Which way do you prefer and why?

/* METHOD 1 */
function Foo() {
    this.Bar = function() {
        alert("FooBar");
    }    
}

/* METHOD 2 */
function Foo() {
}

Foo.prototype.Bar = function() {
    alert("FooBar");
}

I use the first method when I create my own objects because I find that it encapsulates the logic in a more readable fashion.

Answer 1

I prefer the first method, because it seems cleaner to me.

If I am using a library, though, like prototype, I will use its conventions.

Answer 2

Method 1 is great when you have complete control of the module, but in some cases you need to use Method 2 when you are extending standard classes or someone else's class.

So, I prefer Method 1 for my own code but have to resort to Method 2 in some cases.

Answer 3

If you are going to have lots of little foos running around, #2 is your best option. Just take each instance at the point you need it and determine which is the best.

Answer 4

Method 1 is preferable since it limits access to the method so that it can only be called via Foo. If the Foo function depends on this, you definatly don't want it to be accessible outside the class which it is in method 2.

Method 2 primarily exists so you can extend classes to which you don't have access, but Method 1 should be preferred in all classes that you yourself write.

Answer 5

Those two bits of syntax do two different things and which one you do will depend on how you are using the member functions.

In the first case, you get a copy of the Bar() code for every Foo object you create.

In the second case, you get one copy of Bar() for all Foo objects you create. This will give you a reduced memory footprint.

You always want to use the second method unless you want Foo to have private data, in which case it's required that Bar() be declared by the first method.

Private data example:

function Foo()
{
    var myPrivateVar;       // Only visible inside Foo()

    this.Bar = function()   // Visible to all
    {
        myPrivateVar = "I can set this here!";
    }
}

Answer 6

With method 1 you create a bunch of closures for each instance. And they eat up memory.

Answer 7

Method 2 is useful if you are trying to do something like:

Foo.prototype.onlyNeedsEvaluatingOnce = function() { return "Bar"; }();

Answer 8

i find use of prototype a bit hard er. but proptype helps you to implements hierarchy from object in an easy way:

function Person(lastName,firstName) { this.init(lastName,firstName) }

Person.prototype.init = function (lastName,firstName)
{
   this.lastName = lastName;
   this.firstName = firstName;
}

Employee.prototype = new Person();
function Employee(lastName,firstName,empID)
{
  this.init(lastName,firstName); 
}
var emp = new Employee('smith','john',1);
alert(emp.lastName);

certainly, you can implements hierachy also without prototype, but with prototype its' quite simple.

Answer 9

There are a couple of minor variations on method #2 that you might find helpful. Both work by initializing the prototype with an object literal, with the latter building the object literal in an anonymous function to allow for the creation of (static) private data in the resulting closure:

/* METHOD 2.1 */
function Foo21() {}

Foo21.prototype = 
{
   Bar : function() 
   {
      alert("FooBar");
   }
};

/* METHOD 2.2 */
function Foo22() {}

Foo22.prototype = (function() 
{
   return 
   {
      Bar : function() 
      {
         alert("FooBar");
      }
   };
})();

Answer 10

I find this form useful at times:

function returnObject()
{
    var privateVar = "Hello Private!";

    return {
        publicVar: "Hello Public!",
        publicPrivateVar: privateVar,

        getPrivateVar: function ()
        {
            return privateVar;
        },

        getPublicVar: function ()
        {
            return this.publicVar;
        }
    };
}


var o = returnObject();

alert(o.getPrivateVar() + " and " + o.publicPrivateVar);