Detailed explanation of the principle and example of the new operator in JavaScript

Uses of new

The function of new is to create an instance object through a constructor. The relationship between the instance, the prototype and the constructor is shown in the following figure:

Let’s summarize first

1. Create an empty object
2. The internal property __proto__ of the empty object is assigned to the prototype property of the constructor function.
3. Set the constructor's this to point to an empty object
4. Execute the code inside the constructor
5. Return the new object

Detailed description

When executing the new operation, the following steps are performed in sequence:

1. Create an empty object

• The empty object is an instance of Object, that is, {}.

let obj = {}

2. The internal property __proto__ of the empty object is assigned to the prototype property of the constructor

• This operation is to link the empty object to the correct prototype

function Foo(num) {
  this.number = num
}

obj.__proto__ = Foo.prototype

3. Point the constructor's this to an empty object

• That is, this inside the constructor is assigned to an empty object so that the constructor can be executed correctly later.

Foo.call(obj, 1)

4. Execute the code inside the constructor

• That is, add properties and methods to the empty object.

5. Return the new object

• If a reference type value is returned through the return statement inside the constructor, the new operation will eventually return this reference type value; otherwise, it will return the newly created object.
• Reference type values: all values ​​except primitive type values ​​(numbers, strings, Boolean values, null, undefined, and Symbol values).

Emulating the new operator

The following myNew function simulates the behavior of the new operator:

function myNew(func, ...args) {
  let obj = {}
  obj.__proto__ = func.prototype
  let res = func.apply(obj, args)
  return res instanceof Object ? res : obj
}

function Foo(num) {
  this.number = num
}

let foo1 = myNew(Foo, 1)
console.log(foo1 instanceof Foo) // true
console.log(foo1.number) // 1

let foo2 = new Foo(2)
console.log(foo2 instanceof Foo) // true
console.log(foo2.number) // 2

The instanceof operator is used above to determine whether the return value of the constructor is an instance of Object, that is, whether it is a reference type value; this is because all reference type values ​​are instances of Object, and Object is the base type of all reference type values.

Well, this is the end of this article about the principle of the new operator in JavaScript. For more relevant content about the principle of JS new operator, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!