javascript tutorial - [Solved-5 Solutions] New keyword in javascript - javascript - java script - javascript array


The new keyword in JavaScript can be quite confusing when it is first encountered, as people tend to think that JavaScript is not an object-oriented programming language.

  • What is it ?
  • What problems does it solve ?
  • When is it appropriate and when not ?

Solution 1:

It does 5 things:

  • It creates a new object. The type of this object, is simply object.
  • It sets this new object's internal, inaccessible, [[prototype]] (i.e. __proto__) property to be the constructor function's external, accessible, prototype object (every function object automatically has a prototype property).
  • It makes the this variable point to the newly created object.
  • It executes the constructor function, using the newly created object whenever this is mentioned.
  • It returns the newly created object, unless the constructor function returns a non-null object reference. In this case, that object reference is returned instead.

Note: constructor function refers the function after the new keyword, as in new ConstructorFunction(arg1, arg2) 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 we 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]]. It can only be set at object creation time, either with new, with Object.create, or based on the literal (functions default to Function.prototype, numbers to Number.prototype, etc.). It can only be read with Object.getPrototypeOf(someObject). There is noother way to set or read this value. Functions, in addition to the hidden [[prototype]] property, also have a property called prototype, and it is this that we can access, and modify, to provide inherited properties and methods for the objects we 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. WE 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 then set to the current
// object value of the ObjMaker.prototype (if ObjMaker.prototype is later
// assigned a new object value, obj1's [[prototype]] will not change, but you
// can alter the properties of ObjMaker.prototype to add to both the
// prototype and [[prototype]]). The ObjMaker function was executed, with
// obj1 in place of this... so obj1.a was set to 'first'.

// returns 'first'
// 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'
click below button to copy the code. By JavaScript tutorial team

It's like class inheritance because now, any objects we make using new ObjMaker() will also appear to have inherited the 'b' property.

If we want something like a subclass, then we do this:

SubObjMaker = function () {};
SubObjMaker.prototype = new ObjMaker(); // note: this pattern is deprecated!
// Because we used 'new', the [[prototype]] property of SubObjMaker.prototype
// is now set to the object value of ObjMaker.prototype.
// The modern way to do this is with Object.create(), which was added in ECMAScript 5:
// SubObjMaker.prototype = Object.create(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

// returns 'third', from SubObjMaker.prototype

// returns 'second', from ObjMaker.prototype

// returns 'first', from SubObjMaker.prototype, because SubObjMaker.prototype 
// was created with the ObjMaker function, which assigned a for us
click below button to copy the code. By JavaScript tutorial team

Solution 2:

Suppose we have this function:

var Foo = function(){
  this.A = 1;
  this.B = 2;
click below button to copy the code. By JavaScript tutorial team

If we call this as a standalone function like so:


Executing this function will add two properties to the window object (A and B). It adds it to the window because window is the object that called the function when we 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 we 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 we 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.

Solution 3:

In addition to Daniel Howard's answer, here is what new does (or at least seems to do):

function New(func) {
    var res = {};
    if (func.prototype !== null) {
        res.__proto__ = func.prototype;
    var ret = func.apply(res,, 1));
    if ((typeof ret === "object" || typeof ret === "function") && ret !== null) {
        return ret;
    return res;
var obj = New(A, 1, 2);
is equivalent to
var obj = new A(1, 2);
click below button to copy the code. By JavaScript tutorial team

Solution 4:

For beginners to understand it better try out the following code in console.

function Foo() { 
    return this; 

var a = Foo();       //returns window object
var b = new Foo();   //returns empty object of foo

a instanceof Window  // true
a instanceof Foo     // false

b instanceof Window  // false
b instanceof Foo     // true
click below button to copy the code. By JavaScript tutorial team

Now we can read the community wikwe answer :)

Solution 5:

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

function Person(name) { = name;

var john = new Person('John');
click below button to copy the code. By JavaScript tutorial team

However the extra benefit that ECMAScript has is we can extend with the .prototype property, so we can do something like... Person.prototype.getName = function() { return; } All objects created from this constructor will now have a getName because of the prototype chain that they have access to.

Related Searches to javascript tutorial - New keyword in javascript