JavaScript: Operator “new”

The keyword new is a operator.

It's used to create new object, like this:

new functionName(body);

Here is 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 is Constructor?]

What Does “new” Do Exactly?

Here is 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 is the Parent of a Object Created with “new”?

• If the constructor function F does not have a return statement or returns a value that's not of type object, then the parent of the created object is the value of F.prototype at the time the new F() is called.
• If the constructor function has a return statement, and, the return value is a object X, then, this object X is the result. Therefore, the parent of the newly created object is the parent of X. Exactly what it is depends on how the function created X.

// 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 jj = new FF(3);
console.log(Reflect.getPrototypeOf(jj) === FF.prototype);

// 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 jj = { xx: 5 };

function FF() {}

FF.prototype = jj;

const aa = new FF();

console.log(Reflect.getPrototypeOf(aa) === jj);

FF.prototype = { yy: 6 };

console.log(Reflect.getPrototypeOf(aa) === jj);

// all true