Talk about what the JS new operator does

1. About new

In object-oriented languages, the new keyword is always used to instantiate an object.
In JavaScript, as an operator, new is often used with the constructor

let map = new Set() 
function Apple(size,color){
    
    
    this.size = size
    this.color = color
} 
let apple = new Apple('huge','red') 

Two, new and constructor

Since new is closely related to the constructor, let’s explore what new does from the perspective of the constructor.

2.1 The this point of the constructor

One of the functions of new: the binding of the constructor of the created instance and the binding of the this of the constructor.
As we all know, for an ordinary function, its this generally points to the caller of the function,
but when it interacts with new, its this will point to the Created instance

function Apple(size,color){
    
    
    console.log(this)
    this.size = size
    this.color = color
} 
Apple('huge', 'red') // window
let apple = new Apple('huge', 'red')  // Apple {}
console.log(apple.constructor) // [Function: Apple]

2.2 The return value of the constructor

The second function of new: Specify a default non-undefined return value for the constructor function. All
functions have a return value. When a function does not return, it returns undefined by default. The
instance can be regarded as the return value of the constructor
during the instantiation process. If the return value of the reference type is specified for the constructor, then the reference type is returned; if the constructor has no return value, or if the return value of the basic type is specified, then it returns this (the newly created instance)

function Apple(size,color){
    
    
    this.size = size
    this.color = color
    // case 1
    return {
    
    
        self:true
    }
    // case 2
    return 'self'
    // case 3 
    return 
} 
console.log(new Apple('huge', 'red')) // case1 {self:true}  case2、3  Apple {}

2.3 The inheritance relationship between constructor and instance

The third function of new: Point the prototype chain of the instance to the prototype of the constructor. The
instance is created by the constructor, and the prototype chain of the instance points to the prototype of the constructor. Therefore, the instance has the properties on the prototype of the constructor.
Generally speaking, the prototype chain of an instance It's like this: apple. proto --> Apple.Prototype --> Object.Prototype --> null

function Apple(size) {
    
    
    this.size = size
}
Apple.prototype.height = '100mm'
Apple.width = '80mm'

let apple = new Apple('huge')

console.log(
    apple.size,  // huge 
    apple.height, // 100mm
    apple.width  // undefined
)

Apple.prototype.width = '70mm'

console.log(apple.width) // 70mm
console.log(Object.getPrototypeOf(apple) === Apple.prototype) // true

Three, summary: what exactly does the new operator do

After the above description, the answer to "what does the new operator do?"

JavaScript has done the following things in the process of creating an instance through new:

1. Create an empty object instance
2. Bind the this of the constructor to point to instance, and execute the constructor to set attributes for instance
3. Point the prototype chain of the instance to the prototype of the constructor
4. If the constructor specifies the return value ret of the reference type, then return ret, otherwise return instance

Fourth, follow-up: how to implement the new operator

View another blog implement JS new operator