The introduction to call() in Mozilla's official website is:
The code copy is as follows:
The call() method calls a function or method with a specified this value and several specified parameter values.
Call() syntax
The code copy is as follows:
fun.call(thisArg[, arg1[, arg2[, ...]]])
Call() parameter
thisArg
The code copy is as follows:
This value specified when the fun function is running. It should be noted that the specified this value does not necessarily mean the real this value when the function is executed. If this function is in non-strict mode, this value specified as null and undefined will automatically point to the global object (the window object in the browser), and this value with the original value (number, string, boolean value) will point to the automatic wrapping object of the original value.
arg1, arg2, ...
The code copy is as follows:
Specified parameter list.
call() method in Javascript
Let’s not pay attention to the complicated explanations above, start this process step by step.
Example of Call() method
So I wrote another Hello, World:
The code copy is as follows:
function print(p1, p2) {
console.log(p1 + ' ' + p2);
}
print("Hello", "World");
print.call(undefined, "Hello", "World");
The two methods have the same output, however, in contrast, the call method also passes an undefined.
Next, let’s look at another example.
The code copy is as follows:
var obj=function(){};
function print(p1, p2) {
console.log(p1 + ' ' + p2);
}
print.call(obj, "Hello", "World");
But here, what we passed in is still an undefined, because the undefined in the previous example is because a parameter needs to be passed in. There is no real reflection of the usage of call here, see a better example.
The code copy is as follows:
function print(name) {
console.log( this.p1 + ' ' + this.p2);
}
var h={p1:"hello", p2:"world", print:print};
h.print("fd");
var h2={p1:"hello", p2:"world"};
print.call(h2, "nothing");
Call is called by borrowing other people's methods and objects, just like calling your own. In h.print, when a function is called as a method, this will point to the related object. But in this example, we didn't understand whether h2 called print or print called h2. So I quoted the example of Mozilla
The code copy is as follows:
function Product(name, price) {
this.name = name;
this.price = price;
if (price < 0)
throw RangeError('Cannot create product "' + name + '" with a negative price');
return this;
}
function Food(name, price) {
Product.call(this, name, price);
this.category = 'food';
}
Food.prototype = new Product();
var cheese = new Food('feta', 5);
console.log(cheese);
Here we can really understand which object calls which method. In the example, object instances created using the Food constructor will have the name and price attributes added in the Product constructor, but the category attribute is defined in the respective constructor.
The code copy is as follows:
function print(name) {
console.log( this.p1 + ' ' + this.p2);
}
var h2= function(no){
this.p1 = "hello";
this.p2 = "world";
print.call(this, "nothing");
};
h2();
Here h2 is used as a receiver to call the function print. As in the Food example, in a child constructor, you can implement inheritance by calling the call method of the parent constructor.
As for the advantages of Call method, it is introduced in "Effective JavaScript".
1. Use the call method to customize the receiver to call the function.
2. Use the call method to call a method that does not exist in the given object.
3. Use the call method to define higher-order functions that allow users to specify recipients for callback functions.