如何用 JavaScript 建立一個呼叫每個提供函式的函式？

在 JavaScript 中，函式是一等公民物件，這意味著它們可以作為引數傳遞給其他函式。這是一個強大的特性，可以用來建立一些有趣的模式。

其中一種模式是 **“依次呼叫”** 模式，其中建立一個函式來使用它接收到的引數呼叫每個提供的函式。

為什麼要使用依次呼叫模式？

您可能想要使用依次呼叫模式的原因有很多。

首先，它可以用作抽象化一組函式如何被呼叫的細節的方法。如果函式以複雜或重複的方式被呼叫，這將非常有用。

其次，它可以用來建立某種 **“管道”**，其中每個函式的輸出都作為輸入傳遞給鏈中的下一個函式。這可以成為將一系列操作串聯在一起的一種方便的方法。

最後，它可以用來建立一個 **“分流”** 函式，該函式使用相同的引數呼叫多個函式並收集結果。這對於日誌記錄、除錯或其他用途可能很有用。

如何實現依次呼叫模式？

有幾種不同的方法可以實現依次呼叫模式。

最直接的方法是簡單地遍歷提供的函式並使用引數呼叫每個函式。

function invokeEach(functions, args) {
   for (var i = 0; i < functions.length; i++) {
      functions[i].apply(null, args);
   }
}

在上面的程式碼中，我們遍歷函式並使用 **Function.prototype.apply()** 方法呼叫每個函式。此方法允許我們使用特定的 this 值和引數陣列來呼叫函式。

我們在這裡使用 **apply()** 方法，因為它是一種將引數作為陣列傳遞的便捷方法。您也可以使用 **Function.prototype.call()** 方法，該方法允許您將引數作為單個值傳遞。

示例

以下是完整的可執行程式碼示例。

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <div id="result1"></div>
   <div id="result2"></div>
   <div id="result3"></div>
   <script>
      function foo(x) {
         document.getElementById("result").innerHTML = 'foo: ' + x;
      }
      function bar(x) {
         document.getElementById("result1").innerHTML = 'bar: ' + x;
      }
      function baz(x) {
         document.getElementById("result2").innerHTML = 'baz: ' + x;
      }
      function qux(x) {
         document.getElementById("result3").innerHTML ='qux: ' + x;
      }
      function invokeEach(functions, args) {
         for (var i = 0; i < functions.length; i++) {
            functions[i].apply(null, args);
         }
      }
      invokeEach([foo, bar, baz, qux], [5]);
   </script>
</body>
</html>

如您所見，上面的程式碼示例定義了四個函式： *foo()、bar()、baz()* 和 *qux()*。這些函式只是列印一條包含提供引數的訊息。

接下來，我們定義 *invokeEach()* 函式，該函式接收一個函式陣列和一個引數陣列。此函式遍歷提供的函式並使用提供的引數呼叫每個函式。

最後，我們呼叫 *invokeEach()* 函式，傳入四個函式和單個引數 5。正如預期的那樣，這將導致每個函式都使用引數 5 被呼叫。

在本教程中，我們研究了 JavaScript 中的依次呼叫模式。此模式可用於建立一個使用它接收到的引數呼叫每個提供的函式的函式。

我們瞭解瞭如何實現此模式，並瞭解了您可能想要使用它的幾個原因。

更新於：2022年8月4日

瀏覽量：107

開啟您的 職業生涯

完成課程獲得認證

開始學習
廣告