Function call() 方法允许我们指定 this 的值以及单独提供的参数来调用一个函数。当一个普通的函数被调用时，函数内部的 this 值是该函数被访问的对象。我们可以通过使用 call() 方法来操控 this 值，并且可以为 this 分配任意的对象。换句话说，我们可以在不将函数作为方法附加到对象上的情况下，调用现有的函数作为对象的方法。
在 JavaScript 中，每个函数都是一个 Function 对象。Function 对象提供了函数的属性和方法。这些属性和方法定义在 Function.prototype 上，并由所有 Function 实例共享。Function 对象提供的一些重要方法包括 call()、apply() 和 bind() 方法。
让我们来理解 Function call() 方法的语法。
语法
Function call() 方法在 JavaScript 中的语法如下：
funcName.call(thisArg, arg1, arg2, ... argN);
在上述语法中，funcName 是要调用的函数名称。
参数
-
thisArg — 它代表函数的上下文。这是一个对象，我们可以通过函数内的 this 关键字来访问它的属性或方法。
-
arg1, arg2, ... argN — 这是要传递给函数的 N 个参数。这些参数是可选的。
默认情况下，函数的上下文是一个全局（window）对象。因此，this 关键字指的是 window 对象。
返回值
call() 方法返回函数返回的值。
示例
让我们通过一些例子来理解 JavaScript 中的 Function call() 方法。
不指定参数的 call() 方法
在下面的例子中，我们定义了一个 test() 函数。我们通过函数名称和 call() 方法来调用这个函数。在这两种情况下，函数打印相同的输出。因此，当你不传递任何参数时，call() 方法会产生与普通函数调用相同的结果。
<html>
<head>
<title> JavaScript - Function call() method </title>
</head>
<body>
<p id = "output1"> </p>
<p id = "output2"> </p>
<script>
function test() {
return "The function is invoked!";
}
document.getElementById("output1").innerHTML = test();
document.getElementById("output2").innerHTML = test.call();
</script>
</body>
</html>
输出
The function is invoked!
The function is invoked!
只带 this 参数的 call() 方法
如上所述，this 参数用于指定函数的上下文。这里，我们定义了包含 name 和 age 属性的 person1 和 person2 对象。
我们将对象作为 call() 方法的参数传递。在 printMessage() 函数中，我们通过 this 关键字来访问作为函数参数传递的对象的属性。
在输出中，你可以观察到它根据传递给 call() 方法的对象打印了对象属性的值。
<html>
<head>
<title> JavaScript - Function call() method </title>
</head>
<body>
<p id = "output1"> </p>
<p id = "output2"> </p>
<script>
function printMessage() {
return "The age of the " + this.name + " is " + this.age;
}
const person1 = {
name: "John Doe",
age: 22,
}
const person2 = {
name: "Jane Doe",
age: 40,
}
document.getElementById("output1").innerHTML = printMessage.call(person1);
document.getElementById("output2").innerHTML = printMessage.call(person2);
</script>
</body>
</html>
输出
The age of the John Doe is 22
The age of the Jane Doe is 40
带多个参数的 call() 方法
下面的例子演示了向 call() 方法传递多个参数。printSum() 函数返回函数参数和对象属性的总和。
<html>
<head>
<title> JavaScript - Function call() method </title>
</head>
<body>
<p id = "output"> </p>
<script>
function printSum(p1, p2) {
return (this.num1 + this.num2 + p1 + p2);
}
const nums = {
num1: 5,
num2: 10,
}
const ans = printSum.call(nums, 40, 32);
document.getElementById("output").innerHTML = "Total sum is " + ans;
</script>
</body>
</html>
输出
Total sum is 87
当你将 this 关键字作为 call() 方法的第一个参数而不是一个对象来传递时，它指定了函数自身作为函数上下文。
使用不同对象的方法
使用 Function call() 方法，一个对象可以使用另一个对象中定义的方法。在下面的例子中，我们创建了三个对象——student、student1 和 student2。我们定义了 student 对象的一个方法 getAge()。这个 getAge() 方法被另外两个对象 (student1 和 student2) 使用来访问年龄。student1 和 student2 对象作为参数被传递给 call() 方法。
<html>
<head>
<title> JavaScript - Function call() method </title>
</head>
<body>
<p id = "output1"> </p>
<p id = "output2"> </p>
<script>
const student = {
getAge: function(){
return this.age;
}
}
const student1 = {
name: "John",
age: 22
}
const student2 = {
name: "Doe",
age: 18
}
document.getElementById("output1").innerHTML =student.getAge.call(student1);
document.getElementById("output2").innerHTML =student.getAge.call(student2);
</script>
</body>
</html>
call() 和 apply() 方法
call() 和 apply() 方法是相同的，只是有一点小差别，即 call() 方法接受一系列的参数列表，而 apply() 方法接受一个参数数组。在本教程的下一章中，我们将详细理解 Function apply() 方法。