Implementation of new in JS by Handwriting

Directory 1 Introduction to the new Operator 2 What new did 3 Simulate the implementation of the new Operator 4 Supplement

Preparatory knowledge of ⚠:

Understanding Prototypes and Prototype Chains Understanding this bindings

1 Introduction to new Operator

MDN Documentation: new Operator to create an instance of a user-defined object type or of a built-in object with a constructor.

class Person {
    constructor(name) {
        this.name = name;
    }
}
//  Create an instance of a custom object type 
const person = new Person(' Xiao Ming ')
//  Creating an instance of a built-in object with a constructor 
const date = new Date()

What new does: Create an instance of an object

2 What did new do

It says new Is to create an instance of an object, so how does it create an instance and what does it do internally?

Take new Person () as an example. When it executes, the following things happen:

Create an empty simple JS object

const obj = {}

Add attributes to this object __proto__， And links the property to the prototype object of the constructor

obj.__proto__ = Person.prototype

Call the constructor Person And will this Bind to the newly created object obj

Person.apply(obj)

If the constructor does not explicitly return 1 object, the newly created object is returned, that is obj

3 Simulated implementation of new operator

As mentioned above, new Operator does so four things, so let's simulate the implementation with functions according to these four steps new (Handwritten Interview Code)

const _new = function(constructor, ...args) {
    const obj = {}
    obj.__proto__ = constructor.prototype
    const res = constructor.apply(obj, args)
    //  This 1 Step in " Supplement " Will explain in detail in 
    return res instanceof Object ? res : obj
}

The code is very simple, that is, according to the above 4 steps, 1 step and 1 step can be written

4 Supplements

ES5 Provides new0 Method, which can create 1 object and make the new object's __proto__ Property points to an existing object.

So we can use this method to merge steps 1 and 2

const obj = Object.create(constructor.prototype)
//  Equivalent to 
const obj = {}
obj.__proto__ = constructor.prototype

For Step 4, explain one more time

If the constructor does not explicitly return (Usually) Then person Is the newly created object obj If the constructor does not return 1 object, such as 1, "abc", then person Or the newly created object obj

function Person() {
    ...
   return 1
}

If the constructor explicitly returns 1 object, such as {} , function() {}

Then person It is not a newly created object obj It's explicit return This object of

function Person() {
  //  Functions are also objects 
  return function() {}
}

So our last sentence in the _ new function is:

return res instanceof Object ? res : obj

Note: The parameters passed in by the simulated function _ new can only be constructors, not classes

class Animal {  ...}_new(Animal)//  Will report an error: Class constructor Animal cannot be invoked without 'new'//  Class can only be passed through the new To create