How to implement JavaScript's new operator yourself

Constructor

Before introducing new, you must know what a constructor is.

There is no difference in writing between a constructor and an ordinary function. When a function is called through new Fun(), it is called a constructor, and the first letter of the constructor is usually capitalized.

function User(name) {
    this.name = name;
}

let u = new User('leo');

Here, User is the constructor. Of course, you can also call User() directly, but this will not create an instance. In non-strict mode, the name attribute will be hung on the window.

new Operator

So what exactly does the new operator do to create an instance?

The new operator creates an instance of a user-defined object type or an instance of a built-in object that has a constructor. The new keyword performs the following operations:

1. Create an empty simple JavaScript object (i.e. **{}**);

2. Link the object (i.e. set the object's constructor) to another object;

3. Use the newly created object in step 1 as the context of **this**;

4. If the function does not return an object, it returns **this**.

The above is quoted from the new operator - MDN

Maybe you don't understand steps 2 and 4 very well, so I will summarize them again here:

1. Create an empty object u = {}

2. Bind prototype, u.__proto__ = User.prototype

3. Call the User() function and pass the empty object u as this, that is, User.call(u)

4. If the User() function returns an object type after execution, then return this variable, otherwise return this. Note: If the constructor returns a basic type value, it will not be affected and still return this

Implement a new one yourself

Knowing the principle of the new operator, let's implement a FakeNew function ourselves.

function FakeNew() {
    let obj = {};
  
    // Convert the array-like arguments to an array and shift out the first parameter, which is the constructor let constructor = [].shift.apply(arguments);  

    // Bind prototype obj.__proto__ = constructor.prototype;    
  
    // Call the constructor and pass obj as this let res = Constructor.apply(obj, arguments);    

    // return return typeof res === 'object' ? res : obj;   
}

function User(name) {
    this.name = name;
}

User.prototype.getName = function() {
    return this.name;
}

let u = FakeNew(User, 'leo');
console.log(u);
console.log(u.getName());

The comments of the corresponding key steps have been attached to the code, so we have implemented a new operation. I believe that when you see new in the future, you will have a clearer feeling.

The above is the details of how to implement JavaScript's new operator yourself. For more information about JavaScript's new operator, please pay attention to other related articles on 123WORDPRESS.COM!