Detailed explanation of the parsing and implementation of new operators in JavaScript

Preface

newOperators are used when we use constructors to create instances. This article will explain them.newThe execution process of operators is similar to how to implement them yourselfnew Operator function.

The operation process of new operator

newThe main purpose of the operator is to create an instance of the user-defined object type or an instance of a built-in object with a constructor (for example, the arrow function does not have a constructor, so it cannot be new of).newThere are roughly the following steps to execute the operator:

1. Create a new empty object
2. Put the new object __proto__ Link to the constructorprototype Object (Each user-defined function has oneprototypeThe property points to an object that has aconstructorProperties point to this function), allowing our public properties and methods to be inherited from the prototype without creating each instance once.
3. Use the new object created in the first step as the constructor this The context, execution of the constructor, the execution of the constructor allows us to configure the private properties and methods of the object.
4. Execute the constructor, if the constructor has no return value or the return value is not an object, then return itthis。
   

Can I simply express the above logic in code:

function new_ (constr, ...rests) {
 var obj = {};
 obj.__proto__ = ;
 var ret = (obj, rests);
 return isPrimitive(ret) ? obj : ret; //Judge whether the return value of the constructor is an object, and if it is not, it will directly return the created obj object}

Implementation of new

It's said abovenewThe execution process of operators, let's implement one by one. new operator.

function new_(constr, ...rests) {
 if (typeof constr !== "function") {
 throw "the first param must be a function";
 }
 new_.target = constr;
 var obj = ();
 var ret = (obj, rests);
 var isObj = typeof ret !== null && typeof ret === "object";
 var isFun = typeof ret === "function";
 //var isObj = typeof ret === "function" || typeof ret === "object" && !!ret;
 if (isObj || isFun) {
 return ret;
 }
 return obj;
}

function Person(name, age) {
  = name;
  = age;
}
 = function () {
 ();
};
var p1 = new_(Person, 'clloz', '28')
var p2 = new_(Person, 'csx', '31')
(p1); //Person {name: "clloz", age: "28"}
(); //clloz
(p2); //Person {name: "csx", age: "31"}
(); //csx

(p1.__proto__ === ); //true
(p2.__proto__ === ); //true

The above is a simple onenewImplementation, judging whether it is an object may not be very rigorous, but no better method was thought of.

A small addition, inmdnof() Write the method directly into the entry It's also a good idea. On the prototype chain of the function, so this method can be called on each function, inside the methodthis It also points to the function that calls the method.

 = function (aArgs) {
 var oNew = ();
 (oNew, aArgs);
 return oNew;
};

Force new to call the constructor

function Clloz(...arguments) {
 if (!(this instanceof Clloz)) {
 return new Clloz(...arguments)
 }
}

Tips

Add two knowledge points about the new operator.

1. It is mentioned abovenewThe last step in the execution process, if the constructor does not return the value or the return value is not an object, then return itthis. But if the return is a null If so, still return this,Althoughnull It's also trueobject。
2. newThe constructor after the operator can be either parenthesed or without brackets. In addition to passing parameters with brackets, there is another important point that the operator priority of the two uses is different. In this article, it is mentioned that the JS operator priority isnewThe priority of the operator is higher than that of the without parameters.new Foo() > Foo() > new Foo。

It is generally not very encountered, and some questions may ask these questions.

The above is a detailed explanation of the analysis and implementation of new operators in JavaScript. For more information about JavaScript new parsing and implementation, please pay attention to my other related articles!