JavaScript 返回另一个函数的函数

在JavaScript中，函数可以赋值给任何变量，它们可以作为参数传递给其他函数，甚至可以从其他函数中返回。函数的这种行为允许我们在JavaScript中创建高阶函数（Higher-order functions），即返回其他函数的函数。这些高阶函数可以在各种应用中使用，如回调函数、函数的记忆化以及转换等。

在本文中，我们将学习在JavaScript中返回另一个函数的函数，也就是高阶函数，以及如何使用它们来实现某些JavaScript特性，如回调函数、数组/对象过滤和转换等。

让我们看一些示例以更好地理解这个概念。

示例1 – 回调函数

在这个示例中，我们将：

创建一个按钮，并将click事件监听器附加到它上面，点击按钮将调用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>

输出

结果将如下图所示。

JavaScript 返回另一个函数的函数

示例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>