JavaScript takes control of new

This article brings you relevant knowledge about javascript, which mainly introduces related issues about new. The new operator creates an instance of a user-defined object type or has a constructor. One of the built-in object types, I hope it will be helpful to everyone.

【Related recommendations: javascript video tutorial】

Preface

What is newWoolen cloth?

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

Just looking at the definition is still a bit obscure. Let’s look at a specific example to understand the functions implemented by new in JavaScript.

For example

// 现实中瘦不了，但网络中一定要保持苗条
function Thin_User(name, age) {
    this.name = name;
    this.age = age;
}

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();

Through the above example, we can find that xiaobao can be accessed by:

• The properties in the constructor
Thin_User
• access the properties
in

Thin_User.prototype

to describe it more straightforwardly, new Did these things:

• Created an empty object, the object's __proto__->Thin_User.prototype
• executed the constructor, and thisPoints to the new object
• Returns the new object

Supplementary instructions

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

function Thin_User(name, age) {}

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

Initial simulation

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

• Create a new objectobj
• Settingsobj.__proto__->constructor.prototype(But JavaScript does not recommend directly modifying the __proto__ attribute, provide Use the setPrototypeOf method to specifically modify the prototype)
• Use constructor.call/apply(obj, ...) to add attributes to obj
• Returnobj

##__proto__ and prototype, you can see JavaScript for a complete understanding of prototypes and prototype chains
call/apply, you can see JavaScript's hand tearing call and apply

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

function createObject(Con) {
    // 创建新对象obj
    // var obj = {};也可以
    var obj = Object.create(null);

    // 将obj.__proto__ -> 构造函数原型
    // (不推荐)obj.__proto__ = Con.prototype
    Object.setPrototypeOf(obj, Con.prototype);

    // 执行构造函数
    Con.apply(obj, [].slice.call(arguments, 1));

    // 返回新对象
    return obj;}

Return value effect

As we all know, functions have return values. If the constructor has a return value, what will be 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();

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

No hurry, let’s continue to test the situation where the return value is an object.

The return value is an 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 () {
    // 白日做梦吧，留下肥胖的泪水
    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 xiaobaoObject:

It is found that the

age of the xiaobao object has changed, and fat has been added Property, exactly the same as the return value of the constructor.

After reading these two examples, you can basically clarify the situation where the constructor has a return value:

When the constructor return value is an object, the object is returned directly.

Final version simulation

function createObject(Con) {
    // 创建新对象obj
    // var obj = {};也可以
    var obj = Object.create(null);

    // 将obj.__proto__ -> 构造函数原型
    // (不推荐)obj.__proto__ = Con.prototype
    Object.setPrototypeOf(obj, Con.prototype);

    // 执行构造函数，并接受构造函数返回值
    const ret = Con.apply(obj, [].slice.call(arguments, 1));

    // 若构造函数返回值为对象，直接返回该对象
    // 否则返回obj
    return typeof(ret) === 'object' ? ret: obj;}

[Related recommendations:

javascript video tutorial]

The above is the detailed content of JavaScript takes control of new. For more information, please follow other related articles on the PHP Chinese website!