Detailed explanation of the method of calling call() and apply() to implement inheritance mechanism based on JavaScript_Basic knowledge

call() method The

call() method is the most similar to the classic object impersonation method. Its first parameter is used as the object of this. All other parameters are passed directly to the function itself. For example:

Copy code The code is as follows:

function sayHello(sPrefix ,sSuffix) {
alert(this.name ”says“ sPrefix sSuffix);
};

var obj = new Object();
obj.name = "Tom";

sayHello.call(obj, "Hello ", "World.");

In this example, the function sayHello() is defined outside the object, even though it does not belong to any object. The keyword this can be quoted. The name property of object obj is equal to blue. When calling the call() method, the first parameter is obj, indicating that the value of the this keyword in the sayHello() function should be assigned to obj. The second and third parameters are strings. They match the parameters sPrefix and sSuffix in the sayHello() function, and the resulting message "Tom says Hello World." will be displayed.

To use this method with the inheritance mechanism's object impersonation method, simply replace the first three lines of assignment, call, and delete code:

Copy code The code is as follows:

function ClassA(sColor) {
this.color = sColor;
this.sayColor = function () {
alert(this.color);
};
}

function ClassB(sColor, sName) {
//this.newMethod = ClassA;
//this.newMethod(color);
//delete this.newMethod;
ClassA.call(this, sColor);

this.name = sName;
this.sayName = function () {
alert(this.name);
};
}

Here, We need to make the keyword this in ClassA equal to the newly created ClassB object, so this is the first parameter. The second parameter sColor is the only parameter for both classes.

apply() method

The apply() method takes two parameters, the object used as this and the array of parameters to be passed to the function. For example:

Copy code The code is as follows:

function sayColor(sPrefix ,sSuffix) {
alert(sPrefix this.color sSuffix);
};

var obj = new Object();
obj.color = "blue";

sayColor.apply(obj, new Array("The color is ", "a very nice color indeed."));

This example is the same as the previous one, just now called Is the apply() method. When calling the apply() method, the first parameter is still obj, indicating that the value of the this keyword in the sayColor() function should be assigned to obj. The second parameter is an array composed of two strings, matching the parameters sPrefix and sSuffix in the sayColor() function. The final generated message is still "The color is blue, a very nice color indeed." and will be displayed. come out.

This method is also used to replace the first three lines of code for assigning, calling and deleting new methods:

Copy code The code is as follows:

function ClassB(sColor, sName) {
//this.newMethod = ClassA;
//this.newMethod(color);
//delete this.newMethod;
ClassA.apply(this, new Array(sColor));

this.name = sName;
this.sayName = function () {
alert(this.name);
};
}

Same , the first parameter is still this, and the second parameter is an array with only one value, color. You can pass the entire arguments object of ClassB to the apply() method as the second parameter:

Copy the code The code is as follows:

function ClassB(sColor, sName) {
//this.newMethod = ClassA;
//this.newMethod(color);
//delete this.newMethod;
ClassA.apply(this, arguments);

this.name = sName;
this.sayName = function () {
alert(this.name);
};
}

Of course, A parameter object can be passed only if the order of parameters in the superclass is exactly the same as in the subclass. If not, you'll have to create a separate array with the parameters in the correct order. Additionally, the call() method can be used.

We can see that these two methods can very well replace the original object impersonation, making the writing slightly simpler. However, the disadvantage of these methods is that subclasses cannot inherit the methods or attributes declared by the parent class on the prototype chain. To address this issue, the next article will introduce another way to implement inheritance in JavaScript—prototype chain inheritance.