JavaScript 中的高阶函数(下)

143 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第15天,点击查看活动详情

如何从 JavaScript 中的另一个函数返回一个函数

我们可以从另一个函数返回一个函数,因为我们将 JavaScript 中的函数视为值。让我们通过一个例子来看看:

function calculate(operation) {
  switch (operation) {
    case "ADD":
      return function (a, b) {
        console.log(`${a} + ${b} = ${a + b}`);
      };
    case "SUBTRACT":
      return function (a, b) {
        console.log(`${a} - ${b} = ${a - b}`);
      };
  }
}

在上面的代码中,当我们calculate使用参数调用函数时,它会打开该参数,然后最终返回一个匿名函数。因此,如果我们调用该函数calculate()并将其结果存储在一个变量中并控制台记录它,我们将得到以下输出:

const calculateAdd = calculate("ADD");
console.log(calculateAdd);

// Output: 
// [Function (anonymous)]

你可以看到calculateAdd包含该calculate()函数返回的匿名函数。

我们现在将探讨两种调用这个内部函数的方法。

使用变量调用返回的函数

在这种方法中,我们将返回函数存储在一个变量中,如上所示,然后调用该变量来依次调用内部函数。

让我们在代码中看到它:

const calculateAdd = calculate("ADD");
calculateAdd(2, 3);
// Output: 2 + 3 = 5


const calculateSubtract = calculate("SUBTRACT");
calculateSubtract(2, 3);
// Output: 2 - 3 = -1

那我们在这里做什么?

  • 我们调用函数并作为参数calculate()传递ADD
  • 我们将返回的匿名函数存储在calculateAdd变量中,并且
  • 我们通过调用calculateAdd()所需的参数来调用内部返回函数。

使用双括号调用返回的函数

这是调用内部返回函数的一种非常复杂的方法。()()我们在此方法中使用双括号。

让我们在代码中看到它:

calculate("ADD")(2, 3);
// Output: 2 + 3 = 5

calculate("SUBTRACT")(2, 3);
// Output: 2 - 3 = -1

你可以以与我们上面的链接示例类似的方式考虑这一点。只是我们不是链接函数,而是链接参数。

第一个括号中的参数属于外部函数,而第二个括号中的参数属于内部返回函数。

calculate()方法返回一个如前所述的函数,它是使用第二个括号立即调用的返回函数。

正如我上面提到的,这是一种非常复杂的调用函数的方式。但是一旦你掌握了窍门,它就会变得……非常自然。

我们可以在状态管理库中的connect方法中看到这种双括号表示法。你可以在此处redux阅读更多信息。connect

概括

在本文中,我们了解到:

  • 为什么函数在 JS 中被称为一等公民
  • 什么是高阶函数
  • 如何将函数作为参数传递给另一个函数
  • 如何创建数组原型、函数链接、为内置的 filter() 方法编写我们自己的 polyfill
  • 如何从另一个函数返回一个函数以及调用返回函数的不同方法

结论

谢谢阅读!