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:
__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
new
0
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 abovenew
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!