持续创作,加速成长!这是我参与「掘金日新计划 · 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
- 如何从另一个函数返回一个函数以及调用返回函数的不同方法
结论
谢谢阅读!