解释
A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.
以上callback的英文解释,非常清晰简明,有时候英文理解要比翻译成中文二次理解更清楚。大概意思是:回调是一个函数,它作为参数传递给另一个函数,并在其父函数完成后执行。
其实函数也是一种数据类型,既可以当作参数进行传递,也可以当作方法的返回值传递
先明白异步和同步
想要理解清楚callback还是需要先把异步async/同步sync概念弄清楚。
先写一个异步小例子:
function a(){
console.log('我是函数a开头')
setTimeout(function () {
console.log('我是setTimeout')
},1000)
console.log('我是函数a结尾')
}
function b(){
console.log('我是函数b')
}
a()
b()
执行结果:
从执行结果可以看出来执行顺序是之上而下执行下来,但setTimeout函数被放在了最后执行。这是一个异步操作,执行的时候并不会等待setTimeout而直接向下执行,等到所有任务执行完成在回过头来执行setTimeout函数。即使setTimeout第二个参数是0也会最后执行,setTimeout第二个参数的数字是表示执行最快时间不是一个确定时间。
理解
回调函数字面上理解下来就是,回调就是一个函数的调用过程。函数a有一个参数,这个参数是个函数b,当函数a执行完以后执行函数b。那么这个过程就叫回调。字面意思也很好理解:回调,回调,就是回头调用的意思。函数a的事先干完,回头再调用函数b。
需要注意的是:所以回调与同步、异步并没有直接的联系,回调只是一种实现方式,既可以有同步回调,也可以有异步回调,还可以有事件处理回调和延迟函数回调,这些在我们工作中有很多的使用场景
所以其实并不是我们不认识回调函数,而是我们都萦绕在了这个“callback“ 这个词上,当你在一个函数中看到它是就会困惑,其实它只是一个形参名字而已。
回调函数其实我们平时都使用过,来看看下面几个经典的:
ajax中的回调函数:
点击事件的回调函数:
数组中遍历的回调函数:
作用
大多数情况下,callback是用来拿到函数中的数据,这牵扯到闭包的概念,可以看这篇文章:javaScript里的闭包到底是什么?该怎么理解?
就以Ajax的封装为例吧:
var oReq = new XMLHttpRequest()
oReq.onload = function () {
console.log(oReq.responseText)
}
oReq.open("get",url,true)
oReq.send()
上面的是为封装的Ajax,我们请求到的数据responseText只能在onload中拿到,想要拿数据进行下一步操作也只能在onload函数中进行。但我们如果要封装给其他人使用,我们并不知道使用者需要拿这数据干什么,因此我们需要把responseText传递出去,这时候就需要使用callback。
function get(url,callback){
var oReq = new XMLHttpRequest()
oReq.onload = function () {
// console.log(oReq.responseText)
callback(oReq.responseText)
}
oReq.open("get",url,true)
oReq.send()
}
get('data.json', function (data) {
console.log(data)
})
上面这是封装以后的代码,我们通过callback把responseText传递出去,get方法的第二个参数就是回调函数callback,而data就是callback函数传递出来的responseText数据,通过回调函数拿到数据,使用者需要拿数据干什么都行了。