Specific use of new operator in JavaScript

The new operator in JavaScript is a very important concept. It allows us to create a custom object type or a built-in object type, such as Array, Date, Function, etc. So, what exactly does the new operator do? Let’s analyze step by step.

What did new do?

First, when we call a function using the new operator, the function will be treated as a constructor, that is, it will be used to create a new object instance. For example:

function Person(name) {  
     = name;
}  
var p1 = new Person("Allen");

Here, we define aPersonThe function is then created with the new operatorp1Object, the type of this object isPerson, it has anameAttribute, assign value to"Allen"。

So, specifically, what does the new operator do? We can summarize it into the following four steps:

Create an empty JavaScript object, let's call it for nownewInstance。
will newInstance[[Prototype]]Attributes point to constructorprototypeAttributes, ifprototypeIf it is an object. Otherwise, newInstance remains as a normal object, its[[Prototype]]Point to. Notice:[[Prototype]]is an internal property that represents the prototype chain of the object. Through this step, newInstance can inherit the properties and methods on the constructor prototype.
Execute the constructor and take newInstance as the context of this (that is, all references to this in the constructor point to newInstance). In this way, the constructor can add some of its own properties and methods to newInstance.
If the constructor returns a non-primitive value (such as an object or a function), then this return value becomes the result of the entire new expression. Otherwise, if the constructor does not return any value or returns a primitive value (such as a number or a string), then newInstance will be the result of the entire new expression. (Usually, the constructor does not return any value, but it has the option to override the normal object creation process.)

For example:

function Foo(bar) {  
     = bar;  
}  
 = function() {  
    ();  
};  
var f1 = new Foo("Hello"); // f1 is an object of type Foo, it has bar attribute and baz methodvar f2 = new Foo("World"); // f2 is also an object of type Foo, it also has bar attribute and baz method(); // Hello  
(); // World  
function Bar() {  
    return {  
        name: "Bar"  
    };  
}  
var b1 = new Bar(); // b1 is a normal object, it has a name attribute(b1 instanceof Bar); // false

Here, we define two functions Foo and Bar, and use the new operator to create three objects f1, f2 and b1. As you can see, f1 and f2 are both Foo types objects. They inherit the baz method on it and have their own bar attributes. b1 is an ordinary object, which has only a name attribute and does not belong to the Bar type, because the Bar function returns an object.

How to hand-written a new

In terms of underlying implementation, class is still based on prototype inheritance and constructor. Based on this understanding:

function newInstance(constructor, ...args) {
  // Create an empty object and __proto__ points to  const obj = ();
  // Execute the constructor and bind this to the new object  const result = (obj, args);
  // If the constructor returns an object, the object is returned  if (result &amp;&amp; (typeof result === "object" || typeof result === "function")) {
    return result;
  }
  // Otherwise, return a new object  return obj;
}
// Example usagefunction Person(name) {
   = name;
}
 = function() {
  (`Hello, I'm ${}.`);
};
const person1 = newInstance(Person, "Allen");
(); // Output "Hello, I'm Allen."

In the above code,myNewFunction simulatednewThe behavior of the operator, it accepts two parameters: the constructor and the constructor parameter, and returns a new instance object. Inside the function, first create a new empty objectobj, and then put the object's__proto__Properties point to the prototype object of the constructor, thus implementing prototype inheritance. Then the constructor'sthisBind to the new object and execute the constructor. If the constructor returns an object, it will return the object directly, otherwise the newly created object will be returned.obj。

This is the introduction to this article about the specific use of new operators in JavaScript. For more related contents of JavaScript new operators, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!