JS: new (operator)

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. Important: no return statement.
// This is the constructor
function Fcon(xname, xage) {
 this.name = xname;
 this.age = xage;
}

// create a new object
const xobj = new Fcon("Joe", 20);

console.log(xobj);
// Fcon { name: "Joe", age: 20 }

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 Fcon().

1. Every function has a property key "prototype".
2. The value of Fcon.prototype by default is {"constructor":Fcon} (that is, a object with a property key "constructor", with value of the function itself).
3. JavaScript creates a new empty object newObj, and make newObj's parent to be Fcon.prototype.
4. The function Fcon is executed, with Fcon's this having value of newObj.
5. If Fcon does not have a return statement, or it does but returns a value that is not a object, then the newObj is the result. If Fcon 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 Fcon1 = function () {
 this.b = 4;
};

const Fcon2 = function () {
 this.b = 4;
 return 3;
};

const Fcon3 = function () {
 this.b = 4;
 return { "c": 7 };
};

const x1 = new Fcon1();
const x2 = new Fcon2();
const x3 = new Fcon3();

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

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

console.log(x3);
// { c: 7 }

// what 「new Fcon()」 returns depends on whether Fcon 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 Fcon = function (xx) {
  this.yy = xx;
};

const jj = new Fcon(3);
console.log(Reflect.getPrototypeOf(jj) === Fcon.prototype);

// showing the prototype of a object created by a constructor that returns a object

const xdad = { "yy": 3 };

// this function returns a object
const Fcon = function (xx) {
 return xdad;
};

const jj = new Fcon(3);

console.assert(xdad === jj);

// the parent of jj is not Fcon.prototype
console.assert(Reflect.getPrototypeOf(jj) === Fcon.prototype === false);

console.assert(Reflect.getPrototypeOf(jj) === Object.prototype);

[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 Fcon() {}

Fcon.prototype = jj;

const aa = new Fcon();

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

Fcon.prototype = { yy: 6 };

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