有很多人不理解回调函数和递归函数，我们在这里研究一下。（本文仅适合新人）
什么是回调函数，什么是递归函数
- 回调函数
回调函数是一个作为参数传递给另外一个函数的函数，它在主体函数执行过程中的特定条件下执行。
//调用一个函数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);
}
文章是我一行行敲出来的，欢迎收藏转载，转载请注明出处。
