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() 方法。

列印頁面
上一頁
下一頁
廣告