Introduction to the call() method in Javascript_javascript skills

The introduction to call() on Mozilla’s official website is:

Copy code The code is as follows:

The call() method calls a function or method using a specified this value and several specified parameter values.

Call() syntax

Copy code The code is as follows:

fun.call(thisArg[, arg1[, arg2[, ...]]])

Call() parameters

thisArg

Copy code The code is as follows:

The this value specified when the fun function is running. It should be noted that the specified this value is not necessarily the real this value when the function is executed. If the function is in non-strict mode, the this value specified as null and undefined will automatically point to the global object (in the browser, it is window object), and this whose value is a primitive value (number, string, Boolean value) will point to the automatic wrapping object of the primitive value.

arg1, arg2, ...

Copy code The code is as follows:

The specified parameter list.

The call() method in Javascript

Don’t pay attention to the complicated explanations above and start the process step by step.

Instance of Call() method

So I wrote another Hello, World:

Copy code The code is as follows:

function print(p1, p2) {
console.log( p1 ' ' p2);
}
print("Hello", "World");
print.call(undefined, "Hello", "World");

Both methods have the same output. However, in contrast, the call method also passes in undefined.

Next, let’s look at another example.

Copy code The code is as follows:

var obj=function(){};
function print(p1, p2) {
console.log( p1 ' ' p2);
}

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

Only here, what we pass in is still undefined, because the undefined in the previous example is because a parameter needs to be passed in. This doesn't really reflect the usage of call. Let's look at a better example.

Copy code The code 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 means borrowing other people’s methods and objects to call, just like calling your own. In h.print, when the function is called as a method, this will point to the relevant object. It's just that in this example we didn't understand whether h2 called print or print called h2. So I cited Mozilla’s example

Copy code The code 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 see which object called which method. In the example, the object instances created using the Food constructor will have the name and price attributes added in the Product constructor, but the category attributes are defined in their respective constructors.

Copy code The code 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();

h2 here acts as a receiver to call the function print. As in the Food example, within a child constructor, you can implement inheritance by calling the call method of the parent constructor.

As for the advantages of the Call method, they are introduced in "Effective JavaScript".

1. Use the call method to customize the receiver to call the function.
2. Use the call method to call methods that do not exist in the given object.
3. Use the call method to define higher-order functions that allow users to specify receivers for the callback function.