JavaScript takes control of new

How to quickly get started with VUE3.0: Enter the learning

preface

What is new ?

The new operator creates an instance of a user-defined object type or one of the built-in object types that has a constructor.

It's still a bit obscure just by looking at the definition. Let's look at a specific example to understand the function of new in JavaScript .

For example

// You can’t lose weight in real life, but you must stay slim online function Thin_User(name, age) {
    this.name = name;
    this.age = age;
}

Thin_User.prototype.eatToMuch = function () {
    // Daydream and leave fat tears console.log('i eat so much, but i'm very thin!!!');
}

Thin_User.prototype.isThin = true;

const xiaobao = new Thin_User('zcxiaobao', 18);
console.log(xiaobao.name); // zcxiaobao
console.log(xiaobao.age); // 18
console.log(xiaobao.isThin); // true
// i eat so much, but i'm very thin!!!
xiaobao.eatToMuch();

Through the above example, we can find xiaobao can:

• access the properties in the constructor Thin_User
• access the properties in Thin_User.prototype ,

and describe it more straightforwardly, new does these things:

• creates an empty object, The object's __proto__->Thin_User.prototype
• executes the constructor and points this to the new object
• to return the new object.

Supplementary instructions:

Since new is a keyword, we cannot override it like the high-order method of simulating arrays, so we write a function createObject to simulate new effect. The usage is as follows:

function Thin_User(name, age) {}

const u1 = new Thin_user(...)
const u2 = createObject(Thin_User, ...a)

Preliminary simulation

According to the above analysis, the general steps for writing createObject are:

• Create a new object obj
• and set obj.__proto__->constructor.prototype ( but JavaScript does not recommend directly modifying __proto__ Attributes, the setPrototypeOf method is provided to specifically modify the prototype )
• Use constructor.call/apply(obj, ...) to add attributes to obj and
• return obj

__proto__和prototype . You can see JavaScript for a complete understanding of prototypes and prototype chains.
call/apply , you can see the JavaScript tutorial on call and apply.

After learning these, we can write the first version of the code:

function createObject(Con) {
    //Create new object obj
    // var obj = {}; can also be var obj = Object.create(null);

    // Convert obj.__proto__ -> constructor prototype // (not recommended) obj.__proto__ = Con.prototype
    Object.setPrototypeOf(obj, Con.prototype);

    //Execute the constructor Con.apply(obj, [].slice.call(arguments, 1));

    // Return a new object return obj;}

Return value effect

As we all know, functions have return values, so if the constructor has a return value, what is the result returned after the final execution of new ?

The return value is a basic type.

Assuming that the constructor return value is a basic type, let's take a look at the final return result:

function Thin_User(name, age) {
    this.name = name;
    this.age = age;
    return 'i will keep thin forever';
}

Thin_User.prototype.eatToMuch = function () {
    console.log('i eat so much, but i'm very thin!!!');
}

Thin_User.prototype.isThin = true;

const xiaobao = new Thin_User('zcxiaobao', 18);
console.log(xiaobao.name); // zcxiaobao
console.log(xiaobao.age); // 18
console.log(xiaobao.isThin); // true
// i eat so much, but i'm very thin!!!
xiaobao.eatToMuch();

The final return result seems to be subject to any interference. Doesn’t the constructor process the return value?

Don't worry, let's continue to test the situation where the return value is an object.

The return value is the object

function Thin_User(name, age) {
    this.name = name;
    this.age = age;
    return {
        name: name,
        age: age * 10,
        fat: true
    }
}

Thin_User.prototype.eatToMuch = function () {
    // Daydream and leave fat tears console.log('i eat so much, but i'm very thin!!!');
}

Thin_User.prototype.isThin = true;

const xiaobao = new Thin_User('zcxiaobao', 18);
// Error: xiaobao.eatToMuch is not a function
xiaobao.eatToMuch();

When I executed eatToMuch , the console reported an error directly and there was no current function, so I printed the xiaobao object:

It was found that age of the xiaobao object has changed, and fat attribute has been added, which is exactly the same as the return value of the constructor.

After reading these two examples, you can basically clarify the situation when the constructor returns a value: when the constructor returns an object, the object is returned directly.

Final simulation

function createObject(Con) {
    //Create new object obj
    // var obj = {}; can also be var obj = Object.create(null);

    // Convert obj.__proto__ -> constructor prototype // (not recommended) obj.__proto__ = Con.prototype
    Object.setPrototypeOf(obj, Con.prototype);

    //Execute the constructor and accept the constructor return value const ret = Con.apply(obj, [].slice.call(arguments, 1));

    // If the return value of the constructor is an object, return the object directly // Otherwise, return obj
    return typeof(ret) === 'object' ? ret: obj;}