Detailed explanation of new operator in JavaScript

When instantiating an object in JavaScript, our common method is to use the new operator. This article mainly shares with you the detailed explanation of the new operator in JavaScript, hoping to help you.

var Foo = function(x, y) {    this.x = x    this.y = y
}var foo = new Foo(1, 2) // Foo {x: 1, y: 2}

So what exactly does the new operator do? We can take a look at what kind of object foo is.

First of all, foo itself is an object, and then it has two attributes, x and y. At the same time, on the console of most browsers, we can also see a slightly lighter attribute called __proto__. It has two attributes, constructor and __proto__.

__proto__ is an accessor property. It points to the [[Prototype]] of the current object itself. This [[Prototype]] is not an attribute. It is just a symbol that represents the prototype object Foo.prototype of the constructor Foo. For details, please refer to ## Description on #MDN.        

foo.__proto__ === Foo.prototype // true

So, let’s give a rough description

         

var Foo = function(x, y) {    this.x = x    this.y = y
}// 1. 创建一个空对象var foo = {}// 2. 调用构造函数，并且将构造函数的`this`指向fooFoo.call(foo, 1, 2)// 3. foo继承Foo的原型对象foo.__proto__ = Foo.prototype

Wait, although we wrote above that the final foo is indeed the same as the object produced by new Foo(), but the situation is not just that simple .

We know that the new operator operates a function. In the above example, function Foo does not explicitly return any value, so after executing this function, the return value is undefined. When the constructor does not explicitly return a value, after performing the new operation on it, the object instantiated by the constructor will be returned.

What if I return a certain value?

       

var Foo = function(x, y) {    this.x = x    this.y = y    return {        a: this.x
    }
}var foo = new Foo(1, 2) // {a: 1}

foo is the return value after executing this function, so at this time there is no difference between new Foo() and Foo(), so usually, we do not choose to return in a constructor a certain value.

Special attention should be paid to the fact that if what you return in the constructor is not an object, but an ordinary value, such as a Number or String value, then what is returned after new will still be an instantiation. object after that.

Related recommendations:

The difference between the new call of the js function and this in the ordinary call

About new from a Talking about BUG

What is the running process of new operator in js

The above is the detailed content of Detailed explanation of new operator in JavaScript. For more information, please follow other related articles on the PHP Chinese website!