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);
}

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值