js encapsulates the _new function and how to implement the new keyword (with code test)

The content of this article is about the js encapsulation _new function and the method of implementing the new keyword (with code test). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. helped.

1. Foreword

As we all know: What should I do if I don’t have an object? Then get a new one!

So in JS, when we new an object, what does the new keyword do inside?
Now let’s analyze the internal working principle of the new keyword in native JS.

2. Original new

First, let’s take a look at a new object:

//创建Person构造函数，参数为name,age
function Person(name,age){
　　this.name = name;
　　this.age = age;
　}
//实例化对象小明
xm = new Person('xiaoming',18);
//打印实例化出来的对象小明
console.log(xm);

Print results:

You can see from the print results:

When instantiating an object with the new keyword, first An empty object xm is created, and this empty object contains two attributes name and age, which correspond to the two attributes in the constructor respectively. Secondly, we can also know that the instantiated object xm is inherited from Person.prototype, so now We can summarize what the new keyword does internally when instantiating an object. In fact, the new keyword does the following three things internally (the known constructor is Func):

1. Create an empty object and make the empty object inherit Func.prototype;

2. Execute the constructor and point this to the new object just created;

3. Return a new object;

3. Encapsulation_new function

When we know the internal principle of the new keyword, We can encapsulate a _new function so that it can be used for the same function as the new keyword.

_new function needs to pass in the following parameters:
The first parameter: constructor function name Func;
The second parameter and subsequent parameters: the parameters of the constructor

function _new(){
　　//1.拿到传入的参数中的第一个参数，即构造函数名Func
　 var Func = [].shift.call(arguments);
　　//2.创建一个空对象obj,并让其继承Func.prototype
　　var obj = Object.create(Func.prototype);
　　//3.执行构造函数，并将this指向创建的空对象obj
　　Func.apply(obj,arguments)
　　//4.返回创建的对象obj
　　return obj
}

4. Test _new function

After encapsulation, let’s test the encapsulated _new function to see if it Implements the same function as the native new keyword.

//创建Person构造函数，参数为name,age
function Person(name,age){
　　this.name = name;
　　this.age = age;
}

function _new(){
　　//1.拿到传入的参数中的第一个参数，即构造函数名Func
　　var Func = [].shift.call(arguments);
　　//2.创建一个空对象obj,并让其继承Func.prototype
　　var obj = Object.create(Func.prototype);
　　//3.执行构造函数，并将this指向创建的空对象obj
　　Func.apply(obj,arguments)
　　//4.返回创建的对象obj
　　return obj
}

xm = _new(Person,'xiaoming',18);

console.log(xm);

Test results:

From the test results, we can see that the function of _new function Exactly the same as the new keyword.

Related recommendations:

What are the inheritance methods of js? Several ways to implement inheritance in js are introduced

#How to operate js to achieve the effect of clicking on a small picture to display a large picture? (Code example)

A brief introduction and implementation method of shallow copy and deep copy in js

The above is the detailed content of js encapsulates the _new function and how to implement the new keyword (with code test). For more information, please follow other related articles on the PHP Chinese website!