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，而我们可以做到这一点的一种方法是将{匿名函数声明中的{1}}函数调用，如下所示：

timeOfDay()

另一种方法是使用 Function.bind() 方法，该方法返回您调用它的函数的副本，但是您可以配置函数将在其中执行的上下文，根据您传递给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') } );的第一个参数。这是一种非常有用的技术，但是需要对范围和上下文有很好的了解和理解，您可以阅读有关 in another answer of mine 的更多信息：

.bind()

Answer 2

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

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

您将立即调用timeOfDay函数。

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

将函数调用包装在匿名函数中，如另一个答案中所述。
您可以像这样greeting('Brad', timeOfDay);那样省略/删除括号（这样可以避免立即调用函数，但是会丢失参数"evening"，并且错误将持续存在）。
您可以.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/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind

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

2 个答案: