1、什么是回调函数?
将函数B作为实参传递给函数A,那么把函数B称为回调函数,也称为高阶函数。
表示某个函数定义完成后并不会立即执行,而是在完成某些操作之后再来调用该函数
function B(){} //定义B函数
function A(args){} //定义A函数
A(B) //调用A函数,将函数B作为参数传递给A函数,将B函数称为回调函数
2、回调函数的使用
(1)先定义回调函数,在主调函数中传递回调函数的函数名
function print(num){
console.log(num);
}
function add(n1,n2,callback){ //n1,n2是普通参数,callback是函数
let s = n1 + n2
callback(s)
}
add(12,23,print)//将print函数传递给形参callback,print函数就是回调函数
(2)定义匿名回调函数
function add(n1,n2,callback){ //n1,n2是普通参数,callback是函数
let s = n1 + n2
callback(s)
}
add(12,23,function(num){ //调用add函数时,给它传递一个匿名函数(该匿名函数就是回调函数)
console.log(num);
})
3、回调函数的特点
(1)不会立即执行:在主调函数中执行回调函数时必须带'()',若有参数则需要传递参数
(2)回调函数是一个闭包:它可以访问主调函数中的变量
(3)执行前的类型判断:在主调函数中执行回调函数之前,建议判断回调函数是否是一个函数
function print(num){
console.log(num);
}
function add(n1,n2,callback){ //n1,n2是普通参数,callback是函数
let s = n1 + n2
if (typeof callback === 'function') {
callback(s)
} else{
console.log('第三个参数必须是函数');
}
}
// add(12,23,print)
add(12,23,23)
4、回调函数中this指向的问题
function createData(callback){ //createData是主调函数,callback是回调函数
callback()
}
let obj = {
data:100,
tool:function(){
createData(function(){
console.log(this,1111); //this指向window对象,为什么this指向window对象
})
}
}
obj.tool() //window 1111
(1)使用箭头函数
function createData(callback){ //createData是主调函数,callback是回调函数
callback()
}
let obj = {
data:100,
tool:function(){
createData(()=>{
console.log(this,1111); //this指向obj对象
})
}
}
obj.tool() //{ data: 100, tool: [Function: tool] } 1111
(2)在调用回调函数之前,定义一个变量,将this保存起来
function createData(callback){ //createData是主调函数,callback是回调函数
callback()
}
let obj = {
data:100,
tool:function(){
let self = this //定义self将this保存起来
createData(function(){
console.log('回调函数:',self); //this指向obj对象
})
}
}
obj.tool() //{ data: 100, tool: [Function: tool] }
5、JavaScript中使用回调函数的原因
(1)JavaScript是一个事件驱动型的语言,在程序的执行过程中不会因为某一次的响应没有完成而停止程序,而是继续监听后续的事件,如果后续的某个事件被触发,则程序继续执行