传递的箭头函数与作为参数的函数之间的区别是什么?

Question

这两个应该是相同逻辑的实现之间有什么不同?

// Method 1
const myCallback = (foo) => foo;
afterCallback(myCallback);

// Method 2
const myCallback = (foo) => foo;
afterCallback(() => myCallback);

Answer 1

关键的区别在于如何构造回调函数。如果你看第一个代码片段:

afterCallback(myCallback);

我们可以假设afterCallback期望一个函数并调用它——像这样:

function afterCallback(fn) {
// Do stuff
fn(stuff);
}

这意味着当我们传入myCallback时，正在运行的代码看起来像:

myCallback(stuff)

然而，在第二个示例中，您确实有一个函数-但它只是返回另一个函数。第二个例子相当于:

afterCallback(function() { 
return function(foo) {
return foo;
}
});

可以看到，返回的是一个函数，而不是调用它的结果。这意味着myCallback永远不会运行。您需要调用返回的函数:

afterCallback(function() {
return (function(foo) {
return foo;
})();
});

为了简单起见，我在这里使用了IIFE。当使用箭头函数语法时，它看起来像下面这样:

afterCallback(() => myCallback());

根据需要更改参数化;但问题是你的第一个返回函数返回了第二个函数，但没有调用它。