1. 首页
  2. JavaScript 菜鸟教程
  3. JavaScript - 函数 call() 方法

JavaScript - 函数 call() 方法

函数 call（） 方法

Function call（） 方法允许我们调用一个函数，给定一个特定的 this 值和单独提供的参数。当调用普通函数时，函数内的 this 值是访问该函数的对象。我们可以操作 this 值，并可以使用 call（） 方法为 this 分配任意对象。换句话说，我们可以将现行的 function 作为对象的方法调用，而无需将函数作为方法附加到对象上。

在 JavaScript 中，每个函数都是一个 Function 对象。Function 对象为函数提供属性和方法。这些属性和方法在 Function.prototype 上定义，并由所有 Function 实例共享。Function 对象提供的一些重要方法是 call（）、apply（） 和 bind（） 方法。

让我们了解 Function call（） 方法的语法。

语法

JavaScript 中 Function call（） 方法的语法如下 -

 funcName.call(thisArg, arg1, arg2, ... argN);

在上面的语法中， 'funcName' 是要调用的函数的名称。

参数

  • thisArg − 它表示函数的上下文。我们需要在函数中使用 'this' 关键字来访问它的属性或方法。
  • arg1， arg2， ...argN − 要传递给函数的 N 个参数。它们是可选参数。
默认情况下，该函数的上下文是全局 （窗口） 对象。因此，'this' 关键字指的是 'window' 对象。

返回值

call（） 方法返回从函数返回的值。

例子

让我们通过一些示例来了解 JavaScript Function call（） 方法。

未指定参数的函数 call（） 方法

在下面的示例中，我们定义了 test（） 函数。我们使用 function name 和 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（） 方法。其他两个对象（student1 和 student2）使用此 getAge（） 方法来访问年龄。对象 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>

Function call（） 和 apply（） 方法相同，但略有不同，因为 call（） 方法接受参数列表，但 apply（） 方法接受参数数组。让我们在本教程的下一章中详细理解函数 apply（） 方法。

<< JavaScript - 函数调用 JavaScript - 函数 apply() 方法 >>