对于函数这个概念，想必学点计算机的都不陌生了，任何编程语言后离不开函数的使用，可见函数的作用非常大了，之前怎么都理解不了回调函数这个毛刺，也可能没静下心来仔细思考过，简单的东西变得复杂化了，但是最近碰到有点回调这个问题，也理解很多，所以记录一下。
一，函数和回调函数的对比
1. 普通函数
普通函数一般都经常见，也经常使用，随手就可以写出来，比如：
// 代码一
// 定义函数
function test(a, b) {
console.log(a);
console.log(b);
}
//调用函数
test(1, 3)
2. 回调函数
再比如一段vue封装的axios请求:
// 代码二
export function request (config, success, failure) {
// 1.创建axios实例
const instance = axios.create({
baseURL: 'https://autumnfish.cn/',
timeOut: 5000
})
// 2.发送真正的网络请求
instance(config)
.then(res => {
success(res)
})
.catch(err => {
failure(err)
})
}
// 调用
request({
url: 'top/playlist'
}, res =>{
console.log(res);
}, err =>{
console.log(res);
})
看了代码二，此时是不是有一点点小疑惑呢，因为这里就使用了回调函数知识和概念；
二，回调函数的个人理解
1.常规的函数执行总结为：
- 调用函数时 传递实参给函数 => 声明函数形参接收 => 获取返回值
// 代码三
// 2.声明函数 函数形参接收
function test(a, b) {
// 3.获取返回值
console.log(a);
console.log(b);
}
// 1.调用函数 传递实参给函数
test(1, 3)
2.回调函数时执行总结为：
- 函数（匿名）作为参数传递时 由于函数本身就有形参 内部使用函数形参名和加()（相当于调用了传递过来的匿名函数）
- 此时内部使用这个函数时 可以传递实参给函数参数（形参） => 函数参数（形参）接收实参 => 获取回调出来的返回值
听起来感觉有点绕，下面看一下简单实例代码：
//代码四
// 定义函数
function callback(fn1, fn2) {
fn1('我是fn1回调函数 传递的回调值')
fn2('我是fn2回调函数 传递的回调值')
}
// 调用函数 此时传递两个函数参数，而不再是数字，字符串等常见类型了
// 箭头函数的形式
callback(res => {
console.log('拿到回调值' + res ); // res = 我是fn1回调函数 传递的回调值
},err => {
console.log('拿到回调值' + err ); // err = 我是fn2回调函数 传递的回调值
})
// 如果对于箭头函数不理解，可以看看下面普通函数形式，可能更易理解了
callback(function (res) {
console.log(res) // 返回值同上
},function (err) {
console.log(err) // 返回值同上
})
看完代码四例子，接下来再看看一开始介绍的代码二，是不是理解了一点呢，
// 代码二
export function request (config, success, failure) {
// 1.创建axios实例
const instance = axios.create({
baseURL: 'https://autumnfish.cn/',
timeOut: 5000
})
// 2.发送真正的网络请求
instance(config)
.then(res => {
success(res)
})
.catch(err => {
failure(err)
})
}
// 调用
request({
url: 'top/playlist'
}, res =>{
console.log(res);
}, err =>{
console.log(res);
})
本文纯属学习过程中的个人理解，如若不当之处，敬请评论指出。