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>

Learn JavaScript in-depth with real-world projects through our JavaScript certification course. Enroll and become a certified expert to boost your career.

输出

结果将如下面的图片所示。

示例 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 次查看

启动你的职业生涯

通过完成课程获得认证

开始学习
广告