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