JavaScript - call() 方法

call() 方法

Function call() 方法允许我们调用一个函数，并为 this 指定一个特定的值，以及分别提供参数。当普通函数被调用时，函数内部 this 的值是函数被访问到的对象。我们可以操作 this 值，并使用 call() 方法将任意对象赋值给 this。换句话说，我们可以将现有函数作为某个对象的方法来调用，而无需将该函数作为方法附加到该对象。

在 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 个参数。它们是可选参数。

默认情况下，函数的上下文是全局 (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' 参数用于指定函数的上下文。这里，我们定义了 person1 和 person2 对象，它们包含 name 和 age 属性。

我们将对象作为 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>

Function 的 call() 和 apply() 方法是相同的，但存在细微差别，call() 方法接受参数列表，而 apply() 方法接受参数数组。我们将在本教程的下一章详细了解 Function 的 apply() 方法。

打印页面