For most front-end developers, it is a very common operation to get the corresponding instance of a constructor or class. In the following example, a simple process of creating an instance is realized through the constructor and class class respectively.

// ES5 Constructor
let Parent = function (name, age) {
    this.name = name;
    this.age = age;
};
Parent.prototype.sayName = function () {
    console.log(this.name);
};
const child = new Parent('test', 26);
child.sayName() //'test'


//ES6 class class
class Parent {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    sayName() {
        console.log(this.name);
    }
};
const child = new Parent('test', 26);
child.sayName() //test

1, What happens in the new operation?

It's more intuitive. When we create a new constructor, the resulting instance inherits the constructor's construction properties (this.name) and the properties on the prototype.

In the book JavaScript mode, the new procedure is quite straightforward. When the constructor is called with the new operator, the following situations will occur inside the function:

• create an empty object and this variable references the object and inherits the prototype of the function.
• properties and methods are added to the object referenced by this.
• the newly created object is referenced by this and finally implicitly returns this (if no other object is explicitly returned)

Let's rewrite the above example, which is roughly like this:

// ES5 Constructor
let Parent = function (name, age) {
    //1.Create a new object and assign this，This step is implicit,
    // let this = {};
    //2.to this The object pointed to is given construction properties
    this.name = name;
    this.age = age;
    //3.If the object is not returned manually, it is returned by default this The object pointed to is also implicit
    // return this;
};
const child = new Parent();

Assign this to a new variable (such as that), and finally return this variable:

// ES5 Constructor
let Parent = function (name, age) {
    let that = this;
    that.name = name;
    that.age = age;
    return that;
};
const child = new Parent('test', '26');

The creation and return of this is implicit, and the method of returning that manually; This also verifies that these two implicit steps do exist.

2, Implement a simple new method (winter God)

In the new process, a new object will be created, which will inherit the prototype of the constructor and the properties on the prototype. Finally, it will be returned as an instance.

// Constructor function
let Parent = function (name, age) {
    this.name = name;
    this.age = age;
};
Parent.prototype.sayName = function () {
    console.log(this.name);
};
//Self defined new method
let newMethod = function (Parent, ...rest) {
    // 1.With constructor prototype Attribute is the prototype, and a new object is created;
    let child = Object.create(Parent.prototype);
    // 2.take this And call parameters are passed to the constructor for execution
    let result = Parent.apply(child, rest);
    // 3.If the constructor does not return the object manually, the object of the first step is returned
    return typeof result  === 'object' ? result : child;
};
//To create an instance, the constructor Parent And formal parameters are passed in as parameters
const child = newMethod(Parent, 'echo', 26);
child.sayName() //'echo';

//Final inspection and use new The effect is the same
child instanceof Parent//true
child.hasOwnProperty('name')//true
child.hasOwnProperty('age')//true
child.hasOwnProperty('sayName')//false