Javascript: Difference between calling the function directly and using the "new" keyword

Basically "new" changes the "this" reference. Calling the function without using "new" will let "this" refer to window object as usual even if "this" is inside that function. When "new" is used, "this" refers to the function called, like a class object.


Quoted from Stackoverflow by Daniel Howard:

What new does:

1. It creates a new object. The type of this object, is simply object.
2. It sets this new object's internal, inaccessible, [[prototype]] property to be the constructor function's external, accessible, prototype object.
3. It executes the constructor function, using the newly created object whenever this is mentioned.

Once this is done, if an undefined property of the new object is requested, the script will check the object's [[prototype]] object for the property instead. This is how you can get something similar to traditional class inheritance in JavaScript.
The most difficult part about this is point number 2. Every object (including functions) has this internal property called [[prototype]] and there is NO way to access it. The only way to make an object have a particular [[prototype]] is by using the new keyword.
Functions, in addition to the hidden, [[prototype]] property also have a property called prototype, and it is this that you can access, and modify, to provide inherited properties and methods for the objects you make.

---

Here is an example:

ObjMaker = function() {this.a = 'first';};
// ObjMaker is just a function, there's nothing special about it that makes 
// it a constructor.

ObjMaker.prototype.b = 'second';
// like all functions, ObjMaker has an accessible prototype property that 
// we can alter. I just added a property called 'b' to it like 
// all objects, ObjMaker also has an inaccessible [[prototype]] property
// that we can't do anything with

obj1 = new ObjMaker();
// 3 things just happened
// A new, empty object was created called obj1.  At first obj1 was the same as {}
// The [[prototype]] property of obj1 was set to a copy of the prototype property
// of ObjMaker. The ObjMaker function was executed, with obj1 in place of this
// ...so   obj1.a was set to 'first'

obj1.a;
// returns 'first'
obj1.b;
// obj1 doesn't have a property called 'b', so JavaScript checks 
// its [[prototype]]. Its [[prototype]] is the same as ObjMaker.prototype
// ObjMaker.prototype has a property called 'b' with value 'second'
// returns 'second'

It's like class inheritance because now, any objects you make using new ObjMaker() will also appear to have inherited the 'b' property.
If you want something like a subclass, then you do this:

SubObjMaker = function () {};
SubObjMaker.prototype = new ObjMaker();
// Because we used 'new', the [[prototype]] property of SubObjMaker.prototype
// is now set to a copy of ObjMaker.prototype

SubObjMaker.prototype.c = 'third';  
obj2 = new SubObjMaker();
// [[prototype]] property of obj2 is now set to a copy of SubObjMaker.prototype
// Remember that the [[prototype]] property of SubObjMaker.prototype
// is a copy of ObjMaker.prototype with the additional c property defined
// So now obj2 has a prototype chain!
// obj2 ---> SubObjMaker.prototype ---> ObjMaker.prototype

obj2.c;
// returns 'third', from SubObjMaker.prototype

obj2.b;
// returns 'second', from ObjMaker.prototype

obj2.a;
// returns 'first', from SubObjMaker.prototype, because SubObjMaker.prototype 
// was created with the ObjMaker function, which assigned a for us