JS: Operator “new”

By Xah Lee. Date: . Last updated: .

The keyword new is a operator.

Its 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

Reference

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

JS Constructor/Class

  1. “this” Binding
  2. What's Constructor?
  3. Property Key "prototype"
  4. Operator “new”
  5. “instanceof” Operator
  6. Property Key “constructor”
  7. Class
  8. Keyword “extends”
  9. Keyword “super”
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

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

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS Basics
  4. JS in Depth
  5. JS Reference
  6. DOM
  7. SVG
  8. JS Misc