JS: Operator “new”

By Xah Lee. Date: . Last updated: .

The keyword new is a operator.

This operator is used to create new object, like this:

new function_name(…);

Here's a typical use:

// example of creating a object with user defined constructor

// define a function, no return statement. This is the constructor
function FF (bValue) {
    this.b = bValue; // adding a property

// some object that you want to be a prototype
const myParent = {a:3};

// optional
FF.prototype = myParent;

// create a new object
const x = new FF(4);

console.log(x.b); // 4

console.log(x.a); // 3
// property a is from the parent

// the new object's parent is myParent
console.log ( myParent.isPrototypeOf ( x ) ); // true

Functions designed to be used with new are called constructor, and by convention the first letter of the function name is capitalized.

[see JS: What's Constructor?]

What Does “new” Do Exactly?

Here's what the new keyword do. Let's say we have new F().

  1. Every function has a property key "prototype" [see JS: Property Key "prototype"]
  2. The value of F.prototype by default is {"constructor":F} (that is, a object with a property key "constructor", with value of the function itself). [see JS: Property Key “constructor”]
  3. JavaScript creates a new empty object (let's call it T), and set T's parent to F.prototype. [see Understanding Prototype and Inheritance]
  4. The function F is executed, with F's this having value of T. [see JS: “this” Binding]
  5. If F does not have a return statement, or it does but returns a value that is not a object, then the T is the result. [see JS: Object Type] If F returns a value that is a JavaScript object, then that object is the result.
// example showing difference of constructor with different type of return value

const F1 = function () { this.b = 4; };
const F2 = function () { this.b = 4; return 3; };
const F3 = function () { this.b = 4; return {"c":7}; };

const x1 = new F1();
const x2 = new F2();
const x3 = new F3();

console.log(x1); // prints { b: 4 }
console.log(x2); // prints { b: 4 }
console.log(x3); // prints { c: 7 }

// what 「new F()」 returns depends on whether F returns a object

What's the Parent of a Object Created with “new”?

// showing the prototype of a object created by a constructor that doesn't have a return statement
const FF = function (xx) { this.yy = xx; };
const oo = new FF(3);
console.log( Object.getPrototypeOf(oo) === FF.prototype ); // true
// showing the prototype of a object created by a constructor that returns a object

// this function returns a object
const FF = function (xx) { return {"yy":3}; };

const oo = new FF(3);

// the parent of oo is NOT FF.prototype
console.log( Object.getPrototypeOf(oo) === FF.prototype ); // false

// because the function FF returns a object
// so, the newly created object is whatever the function returned.
// in this case, the object is created by literal expression {…}, and by default its parent is Object.prototype
console.log( Object.getPrototypeOf(oo) === Object.getPrototypeOf({}) ); // true
console.log( Object.getPrototypeOf(oo) === Object.prototype ); // true

[see JS: Prototype and Inheritance]

Changing Constructor's Prototype Property Does Not Change Parent of Existing Object

// changing constructor's prototype property does not change parent of existing object

function FF () {};
FF.prototype = {xx: 5};

const aa = new FF();

console.log(aa.xx); // 5

FF.prototype = {yy: 6};

console.log(aa.yy); // undefined


ECMAScript 2015 §ECMAScript Language: Expressions#sec-new-operator

JS Constructor Topic

  1. JS: “this” Binding
  2. JS: What's Constructor?
  3. JS: Property Key "prototype"
  4. JS: Operator “new”
  5. JS: “instanceof” Operator
  6. JS: Property Key “constructor”
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.