JS: Operator “new”

By Xah Lee. Date: . Last updated: .

The keyword new is a operator.

This operator is used to create new objects, together with a function, in this syntax:

new function_name(…);

// example of creating a object with user defined constructor

// define a function, no return statement
function FF () {
    this.b = 4; // adding a property
}

// create a new object
var x = new FF();

console.log(x); // { b: 4 }

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 with its parent being the value of F.prototype. Let's call this new object “tempObj”. [see Understanding Prototype and Inheritance]
  4. The function F is executed, with F's this having value of “tempObj”. [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 “tempObj” is the result. [see JS: What's Object?] 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

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

var x1 = new F1();
var x2 = new F2();
var 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
var FF = function (xx) { this.yy = xx; };
var 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
var FF = function (xx) { return {"yy":3}; };

var 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};

var aa = new FF();

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

FF.prototype = {yy: 6};

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

Reference

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

Ask me question on patreon