Explain in detail the analysis and implementation of new operator in JavaScript

  • 2021-08-10 06:51:36
  • OfStack

Preface

new Operator is used when we create instances with constructors. In this article, 1 new Operator is similar to how to implement a new The function of the operator.

Running process of new operator

new The main purpose of the operator is to create an instance of a user-defined object type or an instance of a built-in object with a constructor (for example, the arrow function has no constructor, so it cannot new Of). new The execution of the operator has the following steps:

Create 1 new empty object Put the new object's __proto__ Object linked to the constructor prototype Object (1 for every 1 user-defined function) prototype Property points to an object that has a constructor Property points to the function, so that our public properties and methods can be inherited from the prototype without having to create every instance once. Use the new object created in step 1 as the constructor's new0 Executes the constructor, whose execution lets us configure the private properties and methods of the object. Executes the constructor, and returns if the constructor has no return value or the return value is not 1 object this .

We can simply express the above logic in code:


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

Implementation of new

It says above new Operator execution process, let's implement 1 by ourselves new Operator.


function new_(constr, ...rests) {
 if (typeof constr !== "function") {
 throw "the first param must be a function";
 }
 new_.target = constr;
 var obj = Object.create(constr.prototype);
 var ret = constr.apply(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) {
 this.name = name;
 this.age = age;
}
Person.prototype.say = function () {
 console.log(this.name);
};
var p1 = new_(Person, 'clloz', '28')
var p2 = new_(Person, 'csx', '31')
console.log(p1); //Person {name: "clloz", age: "28"}
p1.say(); //clloz
console.log(p2); //Person {name: "csx", age: "31"}
p2.say(); //csx

console.log(p1.__proto__ === Person.prototype); //true
console.log(p2.__proto__ === Person.prototype); //true

The above is a simple one new Realization, judging whether it is an object there may not be very rigorous, but there is no better way to think of it.

1 small supplement, in mdn Adj. Function.prototype.apply() Write the method directly to what you see in the entry Function.prototype It's also a good idea, Function.prototype On the prototype chain of all functions, so this method can be called on each function, and the internal of the method this That also points to the function that calls the method.


Function.prototype.construct = function (aArgs) {
 var oNew = Object.create(this.prototype);
 this.apply(oNew, aArgs);
 return oNew;
};

Force the constructor to be called with new


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

Tips

Add two knowledge points about new operator.

As mentioned above new If the constructor does not return a value or the return value is not a 1 object, the this . But if you return 1 null If you say so, still return this , although null It's sort of object . new The constructor after the operator can be parenthesized or not. Besides parenthesized parameters can be passed, there is another important point that the priority of the operators in the two uses is not 1. It is mentioned in the article JS Operator Priority that with parameters new Operators have higher priority than those without parameters, new Foo() > Foo() > new Foo .

1 is unlikely to be encountered, and some questions may be asked.

The above is a detailed explanation of JavaScript new operator analysis and implementation of the details, more about JavaScript new analysis and implementation of information please pay attention to other related articles on this site!


Related articles: