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

时间:2018-08-23 11:44:47

标签: javascript callback

这里是新手问题。

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

    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

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

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

预先感谢 布拉德

2 个答案:

答案 0 :(得分:4)

您很亲密,但是在传递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()

答案 1 :(得分:1)

如评论中所述,当您执行以下操作时:

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/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind