What is the difference of 3 object declarations of javascript

Question

All, I found there are 3 ways to declare object in javascript.

var Waffle = {
   tastes:\'yummy\'
};

var Waffle = function()
{
   this.tastes=\'yummy\';
};
         


        

Answer 1

The literal notation and new Object() creates an object whose prototype is directly the Object. Also, properties and methods are attached on the instance.

/*

Object
  A 
  | instance.__proto__
  | 
instance

*/

//all 3 yield the same result

var foo1 = {
  bar : 'bam!'
}

var foo2 = {}
foo2.bar = 'bam!';

var foo3 = new Object();
foo3.bar = 'bam!';

The constructor approach, either the declared function or the assigned function expression approach, has an additional prototype level between the instance and the Object, which contains your prototype functions attached to the constructor's prototype. Anything attached to the constructor's prototype are shared across all instances.

/*

Object 
  A 
  | instance.__proto__.__proto__
  | 
constructor.prototype 
  A
  | instance.__proto__
  |
instance

*/

//these 2 are the same
//bar is attached at the instance

//function expression assigned to variable foo1
var foo1 = function(){
  this.bar = 'bam!'
}

//function declaration named foo2
function foo2(){
  this.bar = 'bam!'
}

//==========================================================================//

//these 2 are the same, but not the same as above
//methods live on the prototype level and are shared across instances

//function expression assigned to variable foo1
var foo1 = function(){}

//function declaration named foo2
function foo2(){}

foo1.prototype.bar = 'bam!'
foo2.prototype.bar = 'bam!'

The third approach returns a new literal. You don't get the benefits of the constructor method and prototype sharing. It's as if you just called Waffle like an ordinary function, created a literal, attached properties and methods, and returned it.

Best Choice: Depends on purpose.

Object literals:

• Shorter than new Object and can attach methods/properties upon definition.
• Properties/methods live on the instance, no running up the prototype chain which means faster look-up.
• Unoptimized creation of objects might lead to duplicates, which waste memory. For example, creating functions per instance instead of sharing via the prototype.

Constructor:

• Classical OOP style
• Inheritance
• Shared methods via the prototype means less memory used, as opposed to per instance methods.
• Forgetting the new might have unwanted consequences, like attaching globals (if window is the context)

You can check these out in the Chrome Developer tools. Create them in the Console, and watch these expressions in the Sources tab