Detailed explanation of what new() does in Javascript

In JavaScript, what is the working principle of the new operator? How does it change the return value of the constructor and what this points to? The following article will introduce to you relevant information about what new() does in Javascript. Friends who need it can refer to it.

Preface

Like other high-level languages, JavaScript also has the new operator. We know that the new operator is used to instantiate a class. Thus allocating an instance object in memory. But in JavaScript, everything is an object. Why do we need to use new to generate objects? This article will take you to explore the mystery of new in javascript...

To create a new instance of Person, you must use the new operator.

Calling the constructor in this way will actually go through the following 4 steps:

(1) Create a new object;

(2) Assign the scope of the constructor to the new object (so this points to the new object);

(3) Execute the code in the constructor (for this new object) Object adds attributes) ;

(4) Returns a new object.

new operator

After the introduction of the above basic concepts, and adding the new operator, we can complete the traditional oriented Objects are created using class new. In JavaScript, we call this method Pseudoclassical.

Based on the above example, we execute the following code

var obj = new Base();

What is the result of this code? We can see it in the Javascript engine The obtained object model is:

What exactly does the new operator do? In fact, it is very simple, it only does three things.

var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

In the first line, we create an empty object obj

In the second line, we change the _ of this empty object The _proto__ member points to the Base function object prototype member object

In the third line, we replace the this pointer of the Base function object with obj, and then call the Base function, so we assign a value to the obj object An id member variable, the value of this member variable is "base", regarding the usage of the call function.

What will be the effect if we add some functions to the Base.prototype object?

For example, the code is as follows:

Base.prototype.toString = function() {
 return this.id;
}

Then when we use new to create a new object, According to the characteristics of __proto__, the toString method can also be accessed as a method of a new object. So we see:

In the constructor, we set the member variables of the 'class' (for example: id in the example), and in the constructor object prototype we set the public methods of the 'class' . Therefore, the effects of classes and class instantiation are simulated through function objects, Javascript's unique __proto__ and prototype members, and the new operator.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed explanation of vue components and reuse

Vue uses vue-i18n to achieve internationalization implementation code

Infinite loading vue-infinite-loading method in Vue

The above is the detailed content of Detailed explanation of what new() does in Javascript. For more information, please follow other related articles on the PHP Chinese website!