我们什么时候可以将展开的函数作为参数传递

Question

在 Javascript 和许多其他编程语言中，我们可以将函数作为参数传递给其他函数。这是函数式编程中的常见做法。

我们知道需要一个包装器来在那里放置一个断点、查看它在堆栈跟踪中的位置、更好地控制参数或在调用之前/之后添加逻辑。

是否还有其他客观原因不将展开的函数作为参数传递？

myFunction1(x => myFunction2(x)) // wrapped
myFunction1(myFunction2) // unwrapped

Answer 1

询问“是否应该”使用一种或另一种技术在 SO 中大多是禁区。

不过，我将回答一个相关问题，即您何时可以使用该技术，何时不能使用该技术，以及可能有哪些（不利）优势。

你总是可以写foo (x => bar (x))。你不能总是写foo (bar)。为什么可以在another Q & A 中找到一个示例。根据我的经验，一个常见的例子是带有第二个参数的递归函数，该参数在初始调用中默认并在后续调用中传递。这样的函数不能通过简单的引用map来成功传递，因为map提供了除了期望值之外的额外参数。

但这是不寻常的情况。如果您的函数没有默认参数，则包装器似乎没有什么用处。一种说法是，如果你要用foo (x => bar (x)) 替换foo (bar)，为什么不更进一步，使用foo (y => (x => bar (x)) (y)) 或foo (z => (y => (x => bar (x)) (y)) (z))。

包装器工作，但没有添加任何东西......除了你指出的悬挂断点的地方。

这对您来说可能是一个合理的案例。这些天我没有花太多时间在调试器上，但是当我这样做时，我可能偶尔会临时添加这样的包装器。但我后来删除了它们。我发现干净的代码非常重要，不必要的包装器只会使事情变得混乱。在代码审查中，我经常反对这种模式：

const foo = (...args) => {
    // do something with args
    return new Promise ((resolve, reject) => {
        bar (something).then(
            (a) => {
                resolve (a);
             }, (err) => {
                reject (err);
             }
        );
    });
}

我总是需要指出的可以更简洁地写成：

const foo = (...args) => {
    // do something with args
    return new Promise ((resolve, reject) => {
        bar (something) .then (resolve, reject);
    });
}

那么我必须进一步指出，即使这样也可以更好地写成

const foo = (...args) => {
    // do something with args
    return bar (something);
}

关键是resolve 和reject 周围的函数包装很混乱。 bar 周围的 Promise 包装器也是如此。它不会影响结果，对性能的影响很小，但它几乎无法平衡混乱。

（你看，我在这里试图避免意见，但真的不能。）

Answer 2

call(e => foo(e))

完全一样：

call(foo)

只有一层不必要的间接；）

这与函数式编程或柯里化无关，我看不出它会如何影响您的调试体验。

当您想要锁定某些参数或签名不兼容时，您通常会换行。例如，

call(a => foo(5, a))

但在这种情况下，您可能需要考虑使用柯里化。

Answer 3

您无需使用匿名函数包装函数即可将其指定为事件处理程序。如果函数应该获取事件对象，这很好。

window.addEventListener('click', myFunction)

此外，使用匿名函数包装函数会阻止您删除事件处理程序，因为 remove 需要添加的相同事件处理程序。

这将起作用：

window. removeEventListener('click', myFunction)

这不会：

window.removeEventListener('click', e => myFunction(e))

如果您需要向事件处理程序传递更多参数，则需要对其进行柯里化，并将返回的函数分配给一个变量，以便您可以删除处理程序：

const createEventHandler = param => e => {}

const eventHandler = createEventHandler(true)

window.addEventListener('click', eventHandler)
// ...
window.removeEventListener('click', eventHandler)