Principle of new

Time:2022-5-14

Principle of new

The main function of new keyword is to execute a constructor and return an instance object. In the process of new, it determines whether the transfer of parameters can be accepted according to the situation of the constructor. Let’s look at a simple example of new through a piece of code

Execution process of new

The new operator can help us build an instance and bind this. The internal execution steps can be roughly divided into the following steps:

  • Create a new object
  • Object is connected to the constructor prototype and bound with this (this points to the new object)
  • Execute the constructor code (add properties to the new object)
  • Return new object

exception

If you don’t use the keyword “new” and combine the above code, what changes will happen if you remove new? Let’s look at the following code

// 'use strict';

function Person() {
    this. Name = "Jiang Xiaobai";
}

var p = Person();
console.log(p); //undefined
console. Log (name) // Jiang Xiaobai
console.log(p.name); // Cannot read property 'name' of undefined
  • As can be seen from the above code, we did not use the keyword new, and the returned result is undefined. Since the JavaScript code points to window by default, the output result of name is Jiang Xiaobai, which is a case where there is no new keyword.
  • So what happens when there is an operation to return an object in the constructor? Let’s take another look at a modified code based on the above.
function Person() {
    this. NEM = "Jiang Xiaobai";
    return { age: 22 };
}

var p = new Person();
console.log(p); //{ age: 22 }
console.log(p.name); //undefined
console.log(p.age); //22

From this code, we can see that when the constructor finally returns an object irrelevant to this, the new command will directly return the new object instead of the this object generated by the new execution step

However, it is required here that the constructor must return an object. If the returned object is not an object, the newly generated object will be returned according to the implementation steps of new. The next step is to make a slight change on the basis of the above code

function Person(){
   this. Name = 'Jiang Xiaobai'; 
   return 'tom';
}
var p = new Person(); 
console. Log (P) // {Name: 'Jiang Xiaobai'}
console. Log (p.name) // Jiang Xiaobai

So let’s summarize:After the new keyword is executed, it will always return an object, either an instance object or an object specified in the return statement

✏️ Handwriting implementation new

//Handwriting simulation NEW
function myNew(fn, ...args) {
    if (typeof fn !== 'function') {
        throw 'fn mast be a function';
    }
    // 1.  Create an object obj with new object()
    var obj = new Object();
    // 2.  To this object__ proto__ Assign FN Prototype, that is to set the prototype chain
    obj.__proto__ = Object.create(fn.prototype);
    // 3.  Execute FN and take obj as the internal this. Using apply,
    //Change the constructor this to point to the new object,
    //In this way, OBJ can access the properties in the constructor
    var result = fn.apply(obj, args); 
    // 4.  If FN has a return value, it will be returned as a new operation, otherwise obj will be returned
    return result instanceof Object ? result : obj;
}

🔖 test

// test 
function Person(...args) {
  console.log(args)
}
//Use the built-in function NEW
var person1 = new Person(1,2)
console.log(person1)
//Use handwritten new, i.e. create
var person2 = myNew(Person, 1, 2)
console.log(person2)

What do you do after new is called

  • Allow instances to access private properties;
  • Let the instance access the properties on the prototype chain of the constructor prototype (constructor. Prototype);
  • The final result returned by the constructor is the reference data type.