回调函数的新增功能（将回调作为参数传递）（JavaScript）

Question

新手问题在这里。

我试图更好地理解回调函数。 在这里阅读有关它们的信息时，尽管我掌握了这个主意。

  function greeting (name, callback){ console.log(`Greetings ${name}`); callback(); }; function timeOfDay (time){ console.log(`How are you this fine ${time}?`); }; greeting ('Brad', timeOfDay('evening') ); 

输出量

How are you this evening?
Greetings Brad
Uncaught TypeError: callback is not a function

有人可以解释为什么输出按此顺序吗？ 此错误指的是什么，即使代码已完成，为什么还会出现此错误？

我首先按照相同的结构做了一个简单的回调函数，并且效果很好。

预先感谢布拉德

Answer 1

您已经关闭了，但是当传递timeOfDay("evening") ，实际上并没有传递该函数作为回调。 那是一个函数调用，它立即运行，无论返回值是什么，它都是作为第二个参数传递给greeting函数调用的。 由于timeOfDay不返回任何内容，因此您将undefined传递给greeting 。

解决方案是将一个实际函数而不是调用一个函数的结果（除非结果实际上是另一个函数）传递给greeting ，而我们可以做到的一种方法是将timeOfDay()函数调用包装在匿名函数中函数声明，如下所示：

 function greeting (name, callback){ console.log(`Greetings ${name}`); callback(); }; function timeOfDay (time){ console.log(`How are you this fine ${time}?`); }; greeting ('Brad', function() { timeOfDay('evening') } ); 

另一种技术是使用Function.bind()方法，该方法返回您调用过的函数的副本，但是您可以根据传递给的第一个参数来配置函数将在其中执行的上下文.bind() 。 这是一种非常有用的技术，但是需要对范围和上下文有很好的了解和理解，您可以在我的另一个答案中了解更多：

 function greeting (name, callback){ console.log(`Greetings ${name}`); callback(); }; function timeOfDay (time){ console.log(`How are you this fine ${time}?`); }; greeting ('Brad', timeOfDay.bind(this,'evening') ); 

Answer 2

如评论中所述，当您执行以下操作时：

greeting ('Brad', timeOfDay('evening') );

您将立即调用timeOfDay函数。

为避免这种情况，您可以使用以下选项之一：

1. 如另一个答案中所述，将函数调用包装在匿名函数中。

2. 您可以省略/删除括号，例如： greeting('Brad', timeOfDay); （这避免了立即调用函数，但是您将丢失参数"evening" ，并且错误将持续存在）。

3. 您可以.bind()上下文的功能，在下面的例子中，我结合this作为背景的功能，这样它不会瞬间调用的函数。

看一看：

 function greeting (name, callback){ console.log(`Greetings ${name}`); callback(); }; function timeOfDay (time){ console.log(`How are you this fine ${time}?`); }; greeting ('Brad', timeOfDay.bind(this, 'evening') ); 

进一步阅读： https : //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_objects/Function/bind