如何在 JavaScript 中呼叫帶有預先新增引數的函式？

JavaScript 函式可以帶有或不帶引數呼叫。當帶有引數呼叫時，函式將使用傳入的值作為引數執行。當不帶引數呼叫時，函式將不帶任何引數執行。

在某些情況下，需要用部分引數呼叫函式，而不是全部引數。這可以透過使用 Function.prototype.apply 方法或使用展開運算子 (...) 來實現。

使用 Function.prototype.apply 方法

Function.prototype.apply 方法可以用來呼叫一個函式，但只使用部分引數。apply 方法的第一個引數是 this 值，後面跟著一個引數陣列，這些引數將傳遞給函式。

語法

apply(thisArg)
apply(thisArg, argsArray)

引數

  • thisArg − 提供給函式呼叫的 this 值。如果函式不在嚴格模式下，null 和 undefined 將被全域性物件替換，原始值將被轉換為物件。

  • argsArray 可選 − 一個類似陣列的物件，指定函式應呼叫的引數，如果函式不應提供任何引數，則為 null 或 undefined。

示例

例如，考慮以下程式碼：

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      function add(a, b) {
         return a + b;
      }
      document.getElementById("result").innerHTML = add.apply(null, [1, 2])
   </script>
</body>
</html>

this 值作為第一個引數傳遞給 apply 方法，引數陣列作為第二個引數傳遞。函式將使用 this 值和傳入的值作為引數執行。

Function.prototype.apply 方法是呼叫函式時只使用部分引數的一種強大的方法。透過使用 apply 方法，您可以避免硬編碼要傳遞給函式的引數。

使用展開運算子

展開運算子 (...) 可以用來呼叫一個函式，但只使用部分引數。

展開運算子將引數陣列展開成單個引數。

例如，考慮以下程式碼：

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      function add(a, b) {
         return a + b;
      }
      document.getElementById("result").innerHTML = add(...[1, 2])
   </script>
</body>
</html>

引數陣列被展開成單個引數，函式將使用這些引數執行。

使用 bind() 方法

Function.prototype.bind() 方法可以用來建立一個新的函式，該函式將使用一些預先新增的引數呼叫原始函式。

例如，考慮以下程式碼：

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      function add(a, b) {
         return a + b;
      }
      const add1 = add.bind(null, 1);
      document.getElementById("result").innerHTML = add1(2)
   </script>
</body>
</html>

bind 方法的第一個引數是 this 值，其餘引數在呼叫函式時用作函式的引數。在這個例子中，this 值傳遞為 null，值 1 作為第一個引數傳遞給 add 函式。

bind 方法返回一個新函式，該函式將使用給定的引數呼叫。在這個例子中，新函式使用值 2 呼叫，add 函式使用值 1 和 2 呼叫。

JavaScript 函式可以帶有或不帶引數呼叫。在某些情況下，需要用部分引數呼叫函式，而不是全部引數。這可以透過使用 Function.prototype.apply 方法或使用展開運算子 (...) 來實現。

更新於：2022年9月14日

瀏覽量：118

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告