JavaScript 中返回另一個函式的函式


在 JavaScript 中,函式可以賦值給任何變數,可以作為引數傳遞給其他函式,甚至可以從其他函式返回。這種函式的行為允許我們在 JavaScript 中建立高階函式 (HOC),它們是返回其他函式的函式。這些高階函式可用於各種應用程式,例如回撥函式、函式記憶或轉換等。

在本文中,我們將學習返回另一個函式的函式,也就是 JavaScript 中的高階函式,以及如何使用它們來實現某些 JavaScript 功能,例如回撥、陣列/物件過濾和轉換等。

讓我們來看一些示例來更好地理解這個概念:

示例 1 - 回撥函式

在這個例子中,我們將:

  • 建立一個按鈕,併為其附加一個點選事件監聽器,該監聽器將呼叫 handleClick 函式。

  • handleClick 函式將呼叫 processUserInput 函式,並將 greet 函式作為回撥傳遞。

  • processUserInput 函式將詢問使用者的姓名並呼叫回撥函式,然後回撥函式將問候語記錄到控制檯。

檔名 - index.html

<html>
<head>
   <title>Function returning another function in JavaScript</title>
   <script>
      function greet(name) {
         console.log("Hello, " + name + "!");
      }

      function processUserInput(callback) {
         const name = prompt("Please enter your name:");
         callback(name);
      }

      function handleClick() {
         processUserInput(greet);
      }
   </script>
</head>
<body>
   <h1>Callback Example</h1>
   <button onclick="handleClick()">Click Me</button>
</body>
</html>

輸出

結果將如下面的圖片所示。

示例 2 - 陣列高階函式

在這個例子中,我們將:

  • 建立“平方和”和“乘積”按鈕,併為其附加點選事件監聽器。

  • 當點選第一個按鈕時,我們將使用平方函式作為引數呼叫 performOperation 函式。

  • 同樣,當點選第二個按鈕時,我們將使用乘積函式作為引數呼叫 performOperation 函式。

檔名 - index.html

<html>
<head>
   <title>Function returning another function in JavaScript</title>
</head>
<body>
   <h1>Array Higher-Order Functions</h1>
   <pre id="array"></pre>
   <button onclick="performOperation(square)">Square and Sum</button>
   <button onclick="performOperation(product)">Product</button>

   <script>
      const numbers = [1, 2, 3, 4, 5];

      document.getElementById("array").innerHTML = JSON.stringify(numbers);

      function square(n) {
         return n * n;
      }

      function sum(a, b) {
         return a + b;
      }

      function product(a, b) {
         return a * b;
      }

      function performOperation(operation) {
         const result = numbers.map(operation).reduce(operation);
         console.log("Result:", result);
      }
   </script>
</body>
</html>

輸出

結果將如下面的圖片所示。

結論

JavaScript 中的高階函式允許我們建立各種 JavaScript 功能,例如啟用回撥函式用於事件處理或非同步操作,透過 filter() 和 map() 等函式促進資料過濾和轉換等。我們學習瞭如何使用不同的方法實現返回其他函式的函式,並看到了一些解釋相同的示例。

更新於:2023年8月16日

520 次檢視

啟動你的職業生涯

透過完成課程獲得認證

開始學習
廣告
© . All rights reserved.