The new operator in JavaScript

The new operator in JavaScript is used to create an object instance of a given constructor. Here’s an example:

function Person(name, age){
    this.name = name;
    this.age = age;
}
const person1 = new Person('Tom'.20)
console.log(person1)  // Person {name: "Tom", age: 20}
Copy the code

We define a constructor, Person, and then use the new operator to generate an instance of the Person constructor and assign its reference to the variable person1. The console then prints out the contents of Person1, and you can see that the instance object has the name and age attributes, whose values are the ones we passed in when we called the constructor.

So what happens when we use the new operator?

Note: If you are not familiar with the prototype, __proto__, and constructor properties of JS, I strongly recommend reading this article to help you thoroughly understand the prototype, __proto__, and constructor properties of JS.

Operation performed by the new keyword

The new keyword does the following (obj for the created empty object, constrc for the constructor, for description purposes) :

  1. Create an empty objectobj({});
  2. willobjthe[[prototype]]Property points to the constructorconstrcThe prototype (i.eobj.[[prototype]] = constrc.prototype).
  3. Constructor functionconstrcThe inside of thethisBind to the newly created objectobj, the implementation ofconstrcThis is just like calling a normal function, except that this of the function is the newly created objectobjIt’s just like executingobj.constrc());
  4. If the constructor does not return a non-original value (that is, a value that is not a reference type), the newly created object is returnedobj(It is added by defaultreturn this). Otherwise, the value of the reference type is returned.

Here’s a caveats: the [[prototype]] attribute is hidden, but most new browser implementations use __proto__. The constructor’s Prototype property is explicitly accessible.

Let’s use a diagram to show the process of the example at the beginning of the article:

new

Implement the new operator yourself

From the above we have a clear understanding of the new implementation process, so let’s go ahead and implement new ourselves.

function myNew(constrc, ... args) {
    const obj = {}; // 1. Create an empty object
    obj.__proto__ = constrc.prototype; // 2. Point obj's [[prototype]] property to the constructor's prototype object
    constrc.apply(obj, args); Bind this, the context of constrc execution, to obj and execute
    return obj;  //4. Return the newly created object
}

// Examples of usage:
function Person(name, age){
    this.name = name;
    this.age = age;
}
const person1 = myNew(Person, 'Tom'.20)
console.log(person1)  // Person {name: "Tom", age: 20}
Copy the code

The two key steps here are:

  1. Set up the prototype chain of the newly created object correctly so that we can use the methods on the prototype chain.
  2. Use the newly created object as the context in which the constructor is executed so that we can do some initialization correctly.

End of this article!

References:

  1. Stackoverflow.com/questions/1…
  2. JavaScript new Keyword
  3. new operator
  4. JavaScript For Beginners: the ‘new’ operator