JS 回调函数（callback）和递归函数（recursive）

有很多人不理解回调函数和递归函数，我们在这里研究一下。（本文仅适合新人）

什么是回调函数，什么是递归函数

• 回调函数
  回调函数是一个作为参数传递给另外一个函数的函数，它在主体函数执行过程中的特定条件下执行。

//调用一个函数b的时候把一个函数a当做参数传入，由b在特定的条件下触发a函数，a就是回调函数。
function a(s){
    console.log(s)
}
function b(callback){
    callback('执行回调函数了');
}
b(a);
b((s)=>(console.log(s)));
b(function (s) {
    console.log(s)
})

无论是普通函数还是匿名函数或者是箭头函数都可以作为回调函数。上面例子中把三种都掩饰了。

• 递归函数
  函数直接或间接调用自己调用自己。自己调用自己就是递归函数了。

//在a函数执行过程中调用了自己
function a(i){
    if(i < 10){
        console.log(i)
        return a(i + 1) 
    }
    return i;
}
a(0);

递归函数不可以是匿名函数。

通过定义和代码我们能看出来，回调函数是调用其它函数，递归函数是调用自己。

回调函数的作用和使用场景

• 很多原生JS方法都需要回调函数
• 事件绑定
• 异步
• 优化代码可读性
• 代码重用

1、原生JS方法都需要回调函数

数组的方法需要用回调的似乎是最多的，如map、forEach、sort、filter 等。

let arr = [1,2,3,4,5];
arr.forEach(function (val, index, ary) {
    //这里就是回掉函数
    console.log(val);
});

2、事件绑定

事件绑定需要用回调函数无论是DOM0级还是DOM2级。DOM0级的写法有点怪异，但也是回调函数。

let btn = document.getElementById('btn_id');
btn.onclick = function () {
    // 这里就是回调函数
}
btn.addEventListener('click', function () {
    // 这里就是回调函数
}, false);

3、异步

回调函数在异步中起了非常重要的作用，可以说没有回调函数就没有异步。
最经典的就是ajax的异步传输数据，当然不仅仅是ajax，我们看看下面这个例子。

// 要求：10秒吃一口饭，超过100秒就不吃了。
// 吃饭
function eat() {
    console.log('吃一口饭。');
}
// 定时
function timing(callback) {
    let t = 0;
    let timer = window.setInterval(function () {
        t++;
        // 每隔十秒吃一口
        if (t % 10 === 0) {
            callback && callback();
        }
        // 吃100秒就不吃了
        if (t > 100) {
            window.clearInterval(timer);
        }
    }, 1000);
}
timing(eat);

4、优化代码可读性

提到优化代码可读性这就仁者见仁智者见智了。回调函数可以把调用者与被调用者分开，调用者不关心被调用者做了什么事，被调用者页不用关心谁是调用者。 就像上面那个例子，把吃饭这件事单独定义一个方法使定时是定时，吃饭是吃饭，每个函数有专一的事请。

5、代码重用

巧妙的使用回调函数能高度代码重用，还拿吃饭这个例子说事，如果我们的需求是张三十秒钟吃一口饭，李四十秒钟吃一口饭，五秒后喝一口水。这样我们可以写函数张三吃饭和李四吃饭（这种方法是不可取的），看代码。

// 张三吃饭
function eat_zs() {
    let timer = window.setInterval(function () {
        if (t % 10 === 0) {
            console.log('张三吃一口饭。');
        }
        // 吃100秒就不吃了
        if (t > 100) {
            window.clearInterval(timer);
        }
    }, 1000 * 1);
}
// 李四吃饭
function eat_ls() {
    let timer = window.setInterval(function () {
        if (t % 10 === 0) {
            console.log('李四吃一口饭。');
        }
        if (t % 10 === 5 && t % 10 !== 0) {
            console.log('李四喝一口水。');
        }
        // 吃100秒就不吃了
        if (t > 100) {
            window.clearInterval(timer);
        }
    }, 1000 * 1);
}

例子中张三和例子吃饭分别用两个函数实现，显然这两个函数中有很多的相同代码，如果这时需求变了改成15秒吃一口饭了，两个函数的代码都要改。或者这时王二又来吃饭了，还要再定义一个函数。这种代码简直就是垃圾。我们还是把相同的事定义为一个函数，看例子。

// 吃饭
function eat(name) {
    console.log(name + '吃一口饭。');
}
// 喝水
function drink(name) {
    console.log(name + '喝了一口水。')
}
// 定时
function timing(name, cb_eat, cb_drink) {
    let t = 0;
    let timer = window.setInterval(function () {
        t++;
        // 十秒吃一口饭
        if (t % 10 === 0 && cb_eat) {
            cb_eat(name);
        }
        // 吃饭的中间间隔5秒时喝一口水
        if (t % 10 === 5 && t % 10 !== 0 && cb_drink) {
            cb_drink(name);
        }
        // 吃100秒就不吃了
        if (t > 100) {
            window.clearInterval(timer);
        }
    }, 1000);
}
// 张三
timing('张三', eat);
// 李四
timing('李四', eat, drink);
// 王五
timing('王五', null, drink);

这样写代码不论多少人，代码都变得非常简单。其实越复杂回调函数的作用就越大，比如吃一口饭，吃两口菜，再喝一口水，张三吃10口吃饱，李四吃16口吃饱，这里我就不写例子了，感兴趣自己写吧。

回调地狱

回调函数也不是只有好处没有坏处，如果太多层的回调函数嵌套就会使代码不方便阅读，就是回调地狱。多层嵌套的回调在nodejs中尤其严重。
在ES6中新引入了Promise和Generator、await/async来解决回调地狱，由于我还不太懂ES6，大家不懂得自己查其它资料去吧。

递归的用法

递归最经典的案例就是阶乘。工作当中我还是习惯用循环，请原谅我的无知。

function factorial(num) {
    if (num === 1)
        return num;
    else
        return num * factorial(num - 1);
}

文章是我一行行敲出来的，欢迎收藏转载，转载请注明出处。