JavaScript: Operator “new”

By Xah Lee. Date: . Last updated: .

The keyword new is a operator.

It's 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; // add a property
}

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

// optional
FF.prototype = prt;

// 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 prt
console.log( 
Reflect.getPrototypeOf ( x ) === prt
);
// true

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

[see 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 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 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 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 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( Reflect.getPrototypeOf(oo) === FF.prototype ); // true
// showing the prototype of a object created by a constructor that returns a object


const pr = {"yy":3};

// this function returns a object
const FF = function (xx) { return pr; };

const oj = new FF(3);

console.log( pr === oj ); // true

// the parent of oj is not FF.prototype
console.log( Reflect.getPrototypeOf(oj) !== FF.prototype ); // true

console.log( Reflect.getPrototypeOf(oj) === Object.prototype ); // true

[see Prototype and Inheritance]

Changing Constructor's Property key “prototype” Does Not Change Parent of Existing Object

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

const obj = {xx: 5}

function FF () {};

FF.prototype = obj;

const aa = new FF();

console.log( 
Reflect.getPrototypeOf ( aa ) === obj
);
// true

FF.prototype = {yy: 6};

console.log( 
Reflect.getPrototypeOf ( aa ) === obj
);
// true

JavaScript Constructor/Class

JS in Depth
XAH  BUY NOW

JS in Depth

JS Obj Ref

DOM


JS in Depth

Basic Syntax

Value Types

Variable

String

Function

Property

Object and Inheritance

Array

Constructor/Class

Iterable 🌟

Misc