Analysis of javascript borrowed constructor (with examples)

The content of this article is about the analysis of JavaScript borrowing constructors (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Borrowing constructors

In order to solve the problems caused by containing reference type values ​​in prototypes, developers began to use a technique called constructor stealing. .

Sometimes it is also called fake object or classic inheritance.

The basic idea of ​​this technique is very simple, that is, calling the supertype constructor inside the subtype constructor.

A function is nothing more than an object that executes code in a specific environment, so constructors can also be executed on newly created objects by using the apply() and call() methods.

function SuperType() {
    this.colors = ["red","blue","green"];
}

function SubType() {
    //继承了SuperType
    SuperType.call(this);
}

var instance1 = new SubType();

instance1.colors.push("black");
console.log(instance1.colors); //["red","blue","green","black"]

var instance2 = new SubType();
console.log(instance2.colors); //["red","blue","green"]

Note that this piece of code "seconds" the constructor of the super type.

function SubType() {
    //继承了SuperType
    SuperType.call(this);
}

By using the call() method (or the apply() method as well), the SuperType constructor is actually called in the context of the SubType instance object to be created.

In this way, all object initialization codes defined in the SuperType() function will be executed on the new SubType object.

So, each instance object of SubType has its own copy of the colors property

Passing parameters

Relative to the prototype In terms of chaining, a big advantage of borrowing constructors is that you can pass parameters to the supertype constructor in the subtype constructor.

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

function SubType(){
    //继承了SuperType，同时还传递了参数
    SuperType.call(this, "Shaw");

    //实例属性
    this.age = 18;
}

var instance = new SubType();

console.log(instance.name); // "Shaw"
console.log(instance.age); // 18

SuperType in the above code only accepts one parameter name, which will be directly assigned to an attribute.

When calling the SuperType constructor inside the SubType constructor, the name attribute is actually set for the SubType instance object (the pointer of this is related to the execution context).

In order to ensure that the SuperType constructor does not override the properties of the subtype, you can add properties that should be defined in the subtype after calling the supertype's constructor.

The problem of borrowing constructors

If you just borrow the constructor, you will not be able to avoid the problems of the constructor pattern.

Methods are all defined in the constructor, and there is no way to reuse functions. Every time an object is instantiated, the method is essentially re-created on each instance object, resulting in a loss of memory and resources. waste.

Furthermore, methods defined in the prototype of the supertype are also invisible to the subtype (because no prototype object is used here, and the prototype chain of the subtype actually points to Object). As a result, all types You can only use the constructor pattern.

Considering these problems, the technique of borrowing constructors is rarely used alone.

The above is the detailed content of Analysis of javascript borrowed constructor (with examples). For more information, please follow other related articles on the PHP Chinese website!