回调、高阶函数、回调队列有什么区别

Question

在这一点上，我有一个问题，什么是回调，什么使它与高阶函数不同，它与回调队列的概念有什么关系？

来自 MDN： 回调函数

回调函数是作为参数传递给另一个函数的函数，然后在外部函数内部调用该函数以完成某种例程或动作。

看起来与高阶函数的定义有重叠。 一个被传递（然后被调用）到另一个函数的函数。

这是回调的 MDN 示例：

function greeting(name) {
  alert('Hello ' + name);
}

function processUserInput(callback) {
  var name = prompt('Please enter your name.');
  callback(name);
}

processUserInput(greeting);

毫无疑问，到目前为止。

然后我遇到了Event Loop和Callback queue的想法。

 console.log("me first");

  setTimeout(function asyncLog() {
       console.log("i am the last")
  }, 2000);

  console.log("me second")

原来seTimeout函数实际上是一个 JavaScript 包装器，它在引擎盖下与 Web 浏览器 API（计时器）交互。 setTimeout 将函数 (asyncLog) 和计时器 (2000ms) 传递给计时器 API。

当计时器功能（在 Web 浏览器中）完成其工作时，一旦 JS 调用堆栈为 (1) 空且 (2) 已处理，就会在callback queue准备在调用堆栈中调用的函数asyncLog全局执行上下文中的所有内容。

所以在处理完最后一行console.log("me second") ，事件循环将回调函数asyncLog从回调队列传递到调用堆栈，并执行它。

最后的顺序是：

me first
me second
i am the last

在第一个示例中，尽管我们将greeting称为“回调”函数，但我的理解表明回调队列的整个机制被完全跳过：我们没有做任何异步操作，也没有与 Web 浏览器交互API（所有内容都包含在 JS 中）。

如果是这样，当它们与回调队列和异步世界无关时，为什么我们将传递给其他函数的函数称为回调（而不是简单的高阶函数）？

Answer 1

高阶函数是将另一个函数作为参数和/或将函数返回给其调用者的函数。

回调函数是传递给另一个函数并期望另一个函数调用它的函数。

因此，回调本身不一定是高阶函数，而是接收回调作为参数的函数是。 考虑一个非常常见的情况，DOM 事件侦听器：

elem.addEventListener('click', console.log);

这里， .addEventListener是一个高阶函数，它接受另一个函数（ console.log ），然后调用它。 尽管console.log在这里是一个回调，但在这种情况下它本身并不充当高阶函数。

事件循环是底层运行时向您公开的一种机制。 在这里，我们将想象我们必须手动执行此操作，使用数组作为队列：

const queue = [];
const setTimeout = (f, ...args) => {
  queue.push([f, args]);
};

const runQueuedCallbacks = () => {
  let queued;
  while (queued = queue.shift()) {
    let [f, args] = queue;
    f(...args);
  }
};

setTimeout(console.log, 'first');   // queues a call to log
setTimeout(console.log, 'second');  // queues a call to log
console.log('zero-th');             // directly calls log, prints first

// at this point there's no more code to execute, so runQueuedCallbacks runs
// and sequentially steps through the enqueued callbacks.

在现实生活中，由于诸如微任务解析之类的事情（还有排队的回调排队另一个回调时会发生什么），它比这更复杂一点，但这应该会给你一个不错的画面。

Answer 2

高阶函数是将另一个函数作为参数和/或将函数返回给其调用者的函数。 这里，作为参数传递的函数被称为回调函数。 但是，回调函数也可能是高阶函数，也可能不是。 让我们看看例子。

function printString(callbackHof, callback_only, str) {
   str +=' concated first';
  callbackHof( callback_only,str);
}

function concatFirst(callback_only, str)
{
  callback_only(str);
}

function concatAgain(str)
{
  str += ' contated again';
  console.log(str);
}

printString(concatFirst, concatAgain, 'anything');

为了澄清，输出是 ='首先连接的任何内容'。

这里的 printString() 是一个高阶函数，它接受两个函数和一个字符串作为参数。 printString() 的函数参数是 concatFirst() 和 concatAgain()，根据定义，这些 concatFirst() 和 concatAgain() 函数是回调函数。

在这里， concatFirst() 既是回调函数又是高阶函数，因为它作为 printString() 的参数传递，然后还将 concatAgain() 回调函数作为它自己的输入。

而且， concatAgain() 只是一个回调函数，因为它只用一个字符串参数调用而没有进一步的函数参数。

最后，回调队列是浏览器或javascript编译器在事件循环的帮助下完美执行异步和回调操作所遵循的机制。