JavaScript - apply() 方法

apply() 方法

JavaScript 中的 apply() 方法允許我們呼叫一個函式，併為this提供一個特定值，以及以陣列形式提供的引數。

Function call() 和 apply() 方法非常相似，但它們的主要區別在於 apply() 方法接受一個包含所有函式引數的單個數組，而 call() 方法則接受單個引數。

與 call() 方法相同，我們可以使用 apply() 方法來操作this值，並將任意物件賦值給this。

語法

JavaScript 中 Function apply() 方法的語法如下：

func.apply(thisArg, [arg1, arg2, ... argN]);

引數

thisArg − 'thisArg' 引數表示函式上下文。它是一個物件，其屬性需要使用 'this' 關鍵字訪問引用函式。
[arg1, arg2, ... argN] − 這些是要傳遞給函式的引數。

返回值

它返回函式返回的結果值。

示例

讓我們透過一些示例來了解 JavaScript Function apply() 方法。

不傳遞引數使用 apply() 方法

在下面的程式碼中，我們定義了 test() 函式，它在輸出中列印訊息。

我們以標準方式呼叫了該函式，並使用了 apply() 方法，而沒有傳遞任何引數來呼叫該函式。輸出顯示 apply() 方法與正常的函式呼叫具有相同的輸出。

<html>
<head>
    <title> JavaScript - Function apply() method </title>
</head>
<body>
  <p id = "output1"> </p>
  <p id = "output2"> </p>
  <script>
    function test() {
      return "The function test is invoked!";
    }
    document.getElementById("output1").innerHTML = test();
    document.getElementById("output2").innerHTML = test.apply();
  </script>
</body>
</html>

輸出

The function test is invoked!
The function test is invoked!

僅使用 this 引數的 apply() 方法

在下面的程式碼中，'car' 物件包含三個不同的屬性。我們將 car 物件作為 apply() 方法的 'thisArg' 引數傳遞。

在 showCar() 函式中，我們使用 'this' 關鍵字訪問 car 物件的屬性，並將其列印到輸出中。

<html>
<head>
  <title> JavaScript - Function apply() method </title>
</head>
<body>
  <p id = "output"> </p>
  <script>
    function showCar() {
      return "The price of the " + this.name + " " + 
        this.model + " is: " + this.price;
    }
    let car = {
      name: "OD",
      model: "Q6",
      price: 10000000,
    }
    document.getElementById("output").innerHTML = showCar.apply(car);
  </script>
</body>
</html>

輸出

The price of the OD Q6 is: 10000000

使用包含函式引數陣列的 apply() 方法

在下面的示例中，我們將 nums 物件作為 apply() 方法的第一個引數傳遞。之後，我們將引數陣列作為 apply() 方法的引數傳遞。

在 printSum() 函式中，我們使用 'this' 關鍵字訪問物件屬性，使用函式引數訪問函式引數。

<html>
<head>
    <title> JavaScript - Function apply() 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.apply(nums, [40, 32]);
    document.getElementById("output").innerHTML = "Total sum is " + ans;
</script>
</body>
</html>

輸出

Total sum is 87

將 apply() 方法與內建函式一起使用

您還可以將 apply() 方法與內建物件方法一起使用。我們可以使用 apply() 方法呼叫內建物件方法（例如 Math.max 或 Math.min）。

在下面的示例中，我們將 apply() 方法與內建 JavaScript 函式 Math.max 和 Math.min 一起使用。我們不能直接對陣列使用這些方法。我們使用 apply() 方法呼叫 Math.max 和 Math.min 方法。我們將 null 作為 thisArg 傳遞，並將五個整數的陣列作為函式引數傳遞。

<html>
<head>
    <title> JavaScript - Function apply() method </title>
</head>
<body>
<p id = "output-max"> Max element in the array: </p>
<p id = "output-min"> Max element in the array:</p>
<script>

  const numbers = [7, 6, 4, 3, 9];

  document.getElementById("output-max").innerHTML += Math.max.apply(null, numbers);

  document.getElementById("output-min").innerHTML += Math.min.apply(null, numbers);

</script>
</body>
</html>

輸出

Max element in the array: 9
Max element in the array:3

請注意，如果您直接對陣列使用 Math.max() 或 Math.min() 方法來查詢陣列中的最大或最小元素，結果將為 NaN。

列印頁面