JS: 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 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( 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 JS: 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

JS Constructor/Class

  1. “this” Binding
  2. What's Constructor?
  3. Property Key "prototype"
  4. Operator “new”
  5. Operator “instanceof”
  6. Property Key “constructor”
  7. Class
  8. Keyword “extends”
  9. Keyword “super”
Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

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

Web Dev Tutorials