What is the 'new' keyword in JavaScript?

Question

What exactly is the new keyword in JavaScript? Javascript is not a object oriented programming languges and thebefore there are no classes, so it's probably not for creating instances of objects...

Answer 1

so it's probably not for creating instances of object

It's used exactly for that. You define a function constructor like so:

function person(name) {
this.name = name;
}

var john = new person('John');

However the extra benefit that ECMAScript has is you can extend with the .prototype property, so we can do something like...

person.prototype.getName = function() { return this.name; }

All objects created from this constructor will now have a getName because of the prototype chain that they have access to.

Answer 2

JavaScript isn't an object oriented programming language? That's news to a lot of people.

Answer 3

JavaScript is object-oriented. It has classes (implemented as functions and extended with prototypes), objects, methods, properties, and a whole host of other OOP features.

The "new" keyword is used to create objects.

Answer 4

JavaScript is an object-oriented programming language and it's used exactly for creating instances. Rather than being class-based it's prototype-based, but that's does not mean, that it is not object-oriented.

Answer 5

Javascript is an object oriented language, and it use used for creating new instances of object.

Classes are not necessary for objects - Javascript is a prototype based language.

Answer 6

The new keyword creates instances of objects using functions as a constructor. For instance:

var foo = function() {
    return {};
};
var bar = new foo(); // returns an instance of an empty object.

Answer 7

The new keyword is for creating new object instances. And yes, javascript is an object oriented programming language. The convention about the object naming is, always use capital letter for objects that are supposed to be instanted by the new keyword.

obj = new Element();

Answer 8

Suppose you have this function:

var Foo = function(){
  this.A = 1;
  this.B = 2;
};

If you call this as a standalone function like so:

Foo();

Executing this function will add two properties to the document object (A and B). It adds it to the document because document is the object that called the function when you execute it like that, and this in a function is the object that called the function. In Javascript at least.

Now, call it like this with new:

var bar = new Foo();

What happens when you add new to a function call is that a new object is created (just var bar = new Object()) and that the this within the function points to the new Object you just created, instead of to the object that called the function. So bar is now an object with the properties A and B. Any function can be a constructor, it just doesn't always make sense.

Answer 9

I was struggling with this same question myself, and found this page first... However, all the answers on here so far are useless. Either smug, nitpicking about your question, or too vague, or outright incorrect. The answers near the top contain mostly true statements, but haven't actually answered the question of what 'new' does.

After a lot of searching, I have finally found out exactly what the new keyword does, and it's 3 things.

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 new 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 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's 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 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 it's [[prototype]]
// It's [[prototype]] is 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 ObjMaker.prototype
SubObjMaker.prototype.c = 'third';  
obj2 = new SubObjMaker();
// [[prototype]] property of obj2 is now set to SubObjMaker.prototype
// Remember that the [[prototype]] property of SubObjMaker.prototype is ObjMaker.prototype
// 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

I read a ton of rubbish on this subject before finally finding this page, where this is explained very well with nice diagrams.