What is the difference between these two code samples?

Question

Code 1:

var Something = {
name: "Name",
  sayHi: function(){
     alert(Something.name);
  }
}

Code 2:

 function Something(){
    this.name = "Name";
 }

 Something.prototype.sayHi = function(){
    alert(Something.name);
 }

Edit: So, Guys, you mean the Second one is better? or more "formal" ?

Answer 1

In the first code snippet, Something is a simple object, and not a constructor. In particular, you cannot call:

var o = new Something();

Such a form of creating objects is perfect for singletons; objects of which you only need one instance.

In the second snippet, Something is a constructor, and you can use the new keyword with it.

Edit:

Also, in your second snippet, since you are using Something.name as opposed to this.name, it will always alert the name of the constructor itself, which is "Something", unless you override that property with something like Something.name = "Cool";.

You probably wanted that line to say:

alert(this.name);

Answer 2

In first example you can do

Something.sayHi();

while in the second one you have to do it

new Something().sayHi();

Answer 3

Basically in the first example you declare an object literal which is actually already an object instance.

In your second example, you define a constructor function which can be used with the new operator to create object instances.

Object literals can be also used to create new instances of objects and do prototypal inheritance, Douglas Crockford promotes also this technique.

Basically you can have an object operator:

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

This helper function can be used in a very intuitive and convenient way.

It basically receive an object as a parameter, inside the function a new object instance is created, the old object is chained to the new object's prototype, and its returned.

It can be used like this:

var oldObject = {
  firstMethod: function () { alert('first'); },
  secondMethod: function () { alert('second'); },
};

var newObject = object(oldObject);
newObject.thirdMethod = function () { alert('third'); };

var otherObject = object(newObject);
otherObject.firstMethod();

You can go further as you want, making new instances from the previously defined objects.

Recommended :

• Prototypal Inheritance in JavaScript
• Advanced JavaScript (Video)