It does 5 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]] (i.e. __proto__) property to be the constructor function's external, accessible, prototype object (every function object automatically has a prototype property).
  3. It makes the this variable point to the newly created object.
  4. It executes the constructor function, using the newly created object whenever this is mentioned.
  5. 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 to 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 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]]. 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 no other way to get or set this value.

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 just `{}`. 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'.

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(); // 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

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.

🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Operators › new
new - JavaScript | MDN
The new operator lets developers create an instance of a user-defined object type or of one of the built-in object types that has a constructor function.
🌐
Mozilla
developer.mozilla.org › en-US › docs › Web › JavaScript › Guide › Expressions_and_operators
Expressions and operators - JavaScript | MDN
The optional chaining syntax (?.) ... undefined without causing a TypeError. ... You can use the new operator to create an instance of a user-defined object type or of one of the built-in object types....
Top answer
1 of 16
2306

It does 5 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]] (i.e. __proto__) property to be the constructor function's external, accessible, prototype object (every function object automatically has a prototype property).
  3. It makes the this variable point to the newly created object.
  4. It executes the constructor function, using the newly created object whenever this is mentioned.
  5. 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 to 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 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]]. 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 no other way to get or set this value.

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 just `{}`. 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'.

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(); // 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

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.

2 of 16
457

Suppose you have this function:

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

If you call this as a stand-alone function like so:

Foo();

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 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();

When you add new to a function call, a new object is created (just var bar = new Object()) and 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.

🌐
W3Resource
w3resource.com › javascript › operators › new.php
JavaScript new operator - w3resource
In JavaScript new operator is used to create an instance of a user defined object type or one of built in object types which has a constructor function.
🌐
JavaScript.info
javascript.info › tutorial › the javascript language › objects: the basics
Constructor, operator "new"
Probably not a good thing to use everywhere though, because omitting new makes it a bit less obvious what’s going on. With new we all know that the new object is being created. Usually, constructors do not have a return statement. Their task is to write all necessary stuff into this, and it automatically becomes the result.
🌐
2ality
2ality.com › 2014 › 01 › new-operator.html
The new operator implemented in JavaScript
function newOperator(Constr, args) { var thisValue = Object.create(Constr.prototype); // (1) var result = Constr.apply(thisValue, args); if (typeof result === 'object' && result !== null) { return result; // (2) } return thisValue; } Two things are noteworthy:
🌐
TutorialsPoint
tutorialspoint.com › the-new-operator-in-javascript
The new operator in JavaScript
The new operator in JavaScript - The new operator is used for creating a user-defined object type instance of one of the builtin object types that has a constructor function.Following is the code for new operator in JavaScript −Example Live Demo
🌐
Codecademy
codecademy.com › forum_questions › 50f7c54d902b808169003218
Using the "new" operator - JavaScript: The bad parts | Codecademy
JavaScript’s new operator creates a new object that inherits from the operand’s prototype member, and then calls the operand, binding the new object to this.
Find elsewhere
🌐
Unibo
lia.disi.unibo.it › materiale › JS › developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Operators › new.html
new operator - JavaScript | MDN
The new operator creates an instance of a user-defined object type or of one of the built-in object types that has a constructor function.
Top answer
1 of 5
19

Firstly arguments.callee is deprecated in ES5 strict so we don't use it. The real solution is rather simple.

You don't use new at all.

var Make = function () {
  if (Object.getPrototypeOf(this) !== Make.prototype) {
    var o = Object.create(Make.prototype);
    o.constructor.apply(o, arguments);
    return o;
  }
  ...
}

That's a right pain in the ass right?

Try enhance

var Make = enhance(function () {
  ...
});

var enhance = function (constr) {
  return function () {
    if (Object.getPrototypeOf(this) !== constr.prototype) {
      var o = Object.create(constr.prototype);
      constr.apply(o, arguments);
      return o;
    }
    return constr.apply(this, arguments);
  }
}

Now of course this requires ES5, but everyone uses the ES5-shim right?

You may also be interested in alternative js OO patterns

As an aside you can replace option two with

var Make = function () {
  var that = Object.create(Make.prototype);
  // use that 

  return that;
}

In case you want your own ES5 Object.create shim then it's really easy

Object.create = function (proto) {
  var dummy = function () {};
  dummy.prototype = proto;
  return new dummy;
};
2 of 5
36

Let's keep it simple. I want to avoid having to prefix the new operator every time I call a constructor in JavaScript. This is because I tend to forget it, and my code screws up badly.

The obvious answer would be don't forget the new keyword.

You're changing the structure and meaning of the language.

Which, in my opinion, and for the sake of the future maintainers of your code, is a horrible idea.

🌐
W3Schools
w3schools.com › js › js_operators.asp
JavaScript Operators
Assignment operators assign values to JavaScript variables. The Addition Assignment Operator (+=) adds a value to a variable. ... Assignment operators are fully described in the JS Assignment chapter.
🌐
Aaron-powell
aaron-powell.com › posts › 2013-07-14-javascript-new-operator
The JavaScript new operator | LINQ to Fail
Well functions inherit the scope of their parent (unless you modify it) which means that our parent scope of Person will be the global object (window in the browser) or null in ES5 Strict Mode. But that’s not the case when you use the new operator, the new operator is yet another way we can modify this, under this scenario it becomes a completely new object literal, it’s similar to doing this:
🌐
Bennadel
bennadel.com › blog › 3342-building-a-mental-model-for-precedence-and-the-new-operator-in-javascript.htm
Building A Mental Model For Precedence And The "new" Operator In JavaScript
September 28, 2017 - Which, in my mind, means that the "new" operator is actually a little bit "black magic." The mental model that seems to work best for me (so far) is that JavaScript will evaluate the operators (in group 19) from left-to-right until it hits a Function with arguments (ie, using parenthesis).
🌐
Medium
medium.com › coding-beauty › new-javascript-operator-1e60dea05654
This new JavaScript operator is an absolute game changer | by Tari Ibaba | Coding Beauty | Medium
December 28, 2024 - With the new safe assignment operator, you'll stop writing code like this: ... We’ve completely eradicated the deep nesting. The code is far cleaner and more readable. Instead of getting the error in the clunky catch block:
🌐
Arnab
arnab.ch › blog › 2010 › 04 › new-operator-in-javascript
"new" Operator in JavaScript - Arnab Chakraborty
In JavaScript, there’s an operator called new which we use to create an instance of an object (i.e Constructor function). So, what does new do? Well, it ensures that you always get an object when you use it with a constructor function. By the way, there’s no difference between a constructor ...
🌐
Medium
medium.com › geekculture › the-secret-of-new-operator-in-javascript-eafc0e98996
The Secret of “New” Operator in JavaScript | by Jozef Bíroš | Geek Culture | Medium
April 9, 2021 - If you enjoy JavaScript and are interested in how things work without syntactic sugar behind the scene, you are in right place! new operator in Javascript lets developers instantiate user-defined objects.
🌐
Medium
medium.com › @magenta2127 › how-does-the-new-operator-work-f7eaac692026
How does the new operator work in Javascript? | by Magenta Qin | Medium
January 19, 2023 - How does the new operator work? 🤔 ... Create: It creates a new object, and sets this object’s [[prototype]] property to be the prototype property of the constructor function. Execute: It makes this point to the newly created object and executes the constructor function. Return: In normal case, it will return the newly created object.
🌐
CodeBurst
codeburst.io › javascript-for-beginners-the-new-operator-cee35beb669e
JavaScript For Beginners: the ‘new’ operator | by Brandon Morelli | codeburst
July 5, 2017 - This prototype has an object on it called .constructor which points back to the constructor function. It’s a nice little loop. Then, when we use the new operator to create a new object, each object has .__proto__ property which links the new object back to the Student.prototype. ... It’s important because of inheritance.
🌐
Medium
medium.com › @shahbishwa21 › introduction-to-the-safe-assignment-operator-in-javascript-ddc35e87d37c
Introduction to the Safe Assignment Operator (?=) in JavaScript
November 21, 2024 - JavaScript is introducing a new operator, ?=, called the Safe Assignment Operator. This operator is designed to simplify error handling in…
🌐
GeeksforGeeks
geeksforgeeks.org › javascript › javascript-new-keyword
JavaScript new Keyword - GeeksforGeeks
December 15, 2023 - JavaScript new keyword is used to create an instance of an object that has a constructor function. On calling the constructor function with the 'new' operator, the following actions are taken: