JavaScript中的回调函数
在JavaScript中我们常听说回调函数,回调函数是一段可执行的代码段,它作为一个参数传递给其他的代码,其作用是在需要的时候方便调用这段(回调函数)代码。通俗来说,回调函数就是就是一个可执行的函数,在需要的地方调用它。
我们知道,对象可以作为参数传递给函数,而函数实际上也是对象,那么函数也可以作为参数传递给函数,在实际使用中,我们可以很容易找到回调函数的例子,例如jQuery中
$('div').click(function(){
console.log('hello')
})
其实click中的function就是个匿名的回调函数,当然,回调函数也可以是具名的
$('div').click(callback)
function callback(){
console.log('hello')
}
这个回调函数不会立即执行,在传参的过程中,此时传入了回调函数的指针,它并不会立即执行,而是需要等到被调用的时候才会执行。
关于回调函数的this
在回调函数调用时this的执行上下文并不是回调函数定义时的那个上下文,而是调用它的函数所在的上下文。
例如
var obj = {
sum: 0,
add: function(num1, num2){
this.sum = num1 + num2;
}
};
function add(num1, num2, callback){
callback(num1, num2);
};
add(1,2, obj.add);
console.log(obj.sum); //=>0
console.log(window.sum); //=>3
上述代码调用回调函数的时候是在全局环境下,因此this指向的是window,所以sum的值是赋值给windows的。
允许多重回调函数
一个典型的例子就是jQuery中ajax的使用
function successCallback(){
//在发送之前做点什么
}
function successCallback(){
//在信息被成功接收之后做点什么
}
function completeCallback(){
//在完成之后做点什么
}
function errorCallback(){
//当错误发生时做点什么
}
$.ajax({
url:"http://xxx.com/",
success:successCallback,
complete:completeCallback,
error:errorCallback
})
通过回调函数获取数据
在进行跨域的时候,我们需要获取对应接口的数据并对数据进行相应的处理,那么就可以通过接口所提供的回调函数通过传参来获取数据。 例如JSONP跨域时,提供的接口为http://platform.sina.com.cn/slide/album_tech?jsoncallback=func&app_key=1271687855&num=3&page=4
<script>
function func(data){
console.log(data) // 获取数据
}
</script>
<script src="http://platform.sina.com.cn/slide/album_tech?jsoncallback=func&app_key=1271687855&num=3&page=4"></script>
一个回调函数中可以嵌入另一个回调函数,对于这种情况出现多层嵌套时,代码会难以阅读和维护,这个时候可以采用命名回调函数的方式调用,或者采用模块化管理函数。
异步编程
我们知道,JavaScript的执行模式分为两种,异步(Asynchronous)和同步(Synchronous),同步模式指的是代码按照顺序自上而下执行,生活中排队就是同步的一个例子,异步模式指的是代码顺序与执行顺序不保证一致,就好比正好好排队的时候,突然有一个人插队了(不提倡不提倡),这就是异步,但是在浏览器端,异步模式是很重要的,耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子就是Ajax操作。在服务器端,”异步模式”甚至是唯一的模式,因为执行环境是单线程的,如果允许同步执行所有http请求,服务器性能会急剧下降,很快就会失去响应。而回调函数就是实现异步编程的一个方式。
定时器就是异步实现的一个例子。
var a = 1
setTimeout(function () {
console.log(a) // a打印出来是多少呢?
}, 1000)
我们看到1s之后传入一个匿名的回调函数,并打印出a的值,你也许会说,a是1呀!可是你怎么知道后续的a会不会被修改呢?假如a的值在1000行的代码处被修改为233或者其他的值,此时a的值就不确定了,不管是setTimeout,还是setInterval,当我们没有完整的看完代码——也就是代码在之后执行的时候没有确定a的值的时候,a在1s后的值在目前的代码片段是无法确定的,异步编程的特点在于当前可执行的代码不阻塞后面代码的执行,而回调函数是实现异步编程的基本方法。
除了定时器,还有事件监听、http请求、promise对象中使用回调函数都可以实现异步编程。
参考
理解与使用Javascript中的回调函数
Javascript异步编程的4种方法