Difference between var a={ }; and var a= new functionObj();

Question

Is there any difference between

var a= { 
    grade: "A",
    price: 10
};

and

function functionObj(){
   this.grade="A";
   this.price=10;   
}
var a = new functionObj();

The first one points to a list if you correct the braces with square brackets. The second one points to a function. Chalk and cheese. — duffymo, Oct 22 '13 at 12:58
Read: http://www.phpied.com/3-ways-to-define-a-javascript-class/ — JorgeeFG, Oct 22 '13 at 13:01
Maybe you can check out this answer: http://stackoverflow.com/questions/16063394/prototypical-inheritance-writing-up/16063711#16063711 The first you define an object literal and the second you define a function that can be used as a template to create instances. — HMR, Oct 22 '13 at 13:16
@Andy: *"In the first example a's constructor is `Object.prototype`"* No, its constructor is `Object`. Its *prototype* is assigned from `Object.prototype` (as of when it's constructed). — T.J. Crowder, Oct 22 '13 at 13:32
"Different as chalk and cheese". If you change it to "cheese and cheesecake", it's a nice analogy for "java and javascript" — duffymo, Oct 22 '13 at 14:46

T.J. Crowder · Answer 1 · 2013-10-22T13:11:42.873

Your first one is a one-off: It creates a single object that has nothing in common with other objects (except, of course, the things that all objects have in common).

Your second one uses a constructor function. One of the useful things about constructor functions is that they have an object that gets assigned to the objects constructed using them as the objects' prototype. This means that if you refer to a property on the object that it doesn't have its own copy of, the engine looks at the object's prototype to see if it has it. This is the basis of JavaScript's prototypical inheritance.

E.g., the second form lets you create several objects with shared characteristics via their shared prototype.

Concrete example:

function Circle(r) { // Constructor function names are initially capitalized by convention
    this.radius = r;
}
Circle.prototype.area = function() {
    return this.radius * this.radius * Math.PI;
};
Circle.prototype.circumference = function() {
    return this.radius * 2 * Math.PI;
};
Circle.prototype.name = "Circle";

var c1 = new Circle(10);
console.log(c1.name);   // "Circle"
console.log(c1.area()); // 314.1592653589793

var c2 = new Circle(5);
console.log(c2.name);   // "Circle"
console.log(c2.area()); // 78.53981633974483

There, the c1 and c2 objects inherit the properties area and circumference from their shared prototype. Each object we create like that gets its prototype when we do new Circle; the prototype that gets assigned to it is the object that Circle.prototype is pointing to when we do that. As you can see, the properties on the prototype can refer to anything, including functions.

You don't have to use constructor functions to use prototypes, not since ECMAScript 5th edition came out. You can assign a prototype directly via Object.create:

var circlePrototype = {
    area: function() {
        return this.radius * this.radius * Math.PI;
    },
    circumference: function() {
        return this.radius * 2 * Math.PI;
    },
    name: "Circle"
};

var c1 = Object.create(circlePrototype);
c1.radius = 10;
console.log(c1.name);   // "Circle"
console.log(c1.area()); // 314.1592653589793

var c2 = Object.create(circlePrototype);
c1.radius = 5;
console.log(c2.name);   // "Circle"
console.log(c2.area()); // 78.53981633974483

Constructor functions just keep all the pieces (the prototype and the initialization logic) in one tidy place. The downside to constructor functions is that they tend to push you toward a "class-like" way of looking at prototypical inheritance. Although class-like inheritance is useful and popular, it's not the only game in town. It's not uncommon to want to create an object that's a facade in front of another object somewhat ad-hoc: Object.create is great for that situation.

Difference between var a={ }; and var a= new functionObj();

1 Answers1