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);