详解回调函数

前言

回调函数作为我们经常用到的一种函数，看似复杂，实则很容易理解，下面让我来带你一步步理解回调函数。

详解

我们先来看一个我们最熟悉的普通函数的定义与调用。

<code>function map (c) {
  console.log(c);
}
map(5);/<code>

这是我们最常见的函数，而这种函数定义时就是规定了方法，而需要传入变量。

那我们换一种思维，我们规定好函数的变量，而传入方法呢，我们这里设置方法b为我们的形参

<code>var map = function (b) {
    b(4);
}/<code>

这时我们发现，我们在调用函数map的时候需要传入一个方法进去，那我们就按照定义传入一个方法。

<code>map( function(a) {
    console.log(a);
} );/<code>

此时我们并没有给这个传入的方法起名字，这个方法又称之为匿名函数，所以我们这里调用map方法时可以简写为

<code>map((a) => {
  console.log(a);
})；/<code>

打印4，而我们红框里的内容就是我们传入的参数，这不过这个参数是一个函数罢了。也就是说，红框里的内容与上面的形参b相等，我们用红框里的函数去替换b，就得到了 console.log(4) 。

二次回调函数

我们再来看一个二次回调的例子

刚才我们在函数定义时规定了变量是一个常数，而如果我们将这个常数换为一个匿名函数呢

<code>var map = function (b){
  b( (a)=>{
    console.log(a);
  } );
};/<code>

我们看到，刚才的4换为了一个函数，我们如何去调用方法map呢？

我们可以逆向思维想象一下，我们调用函数map时需要传入一个参数，参数替代b，而我们此时b里已经有了方法，而缺少变量，这就相当于我们上面讲一次回调函数时的调用函数部分，此时我们传入一个定义了变量而参数是个方法的方法进去，就相当于一次回调函数的函数定义部分。

<code>map( function (e) {
    e(6); 

} );/<code>

简写为 map( (e) => {e(6);} ); 。

此时我们红框里的内容依旧相当于上面的形参b，而替换掉b以后，我们蓝框里的内容就相当于下面的形参e，再替换掉e以后，就只剩下了我们最终想要表达的打印方法 console.log(6); 。

总结

根据二次回调函数的思想，我们可以无限回调。但我们对多次回调函数很少用到。

我们对于基础知识应该牢牢把握才能理解整篇代码。

閱讀更多 sandag 的文章

關鍵字: function 传入 红框