什么是回调函数？

最新推荐文章于 2024-07-25 15:03:56 发布

yeahSan

最新推荐文章于 2024-07-25 15:03:56 发布

阅读量2.8k

点赞数 2

分类专栏： JavaScript 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/m0_65729457/article/details/127910440

版权

JavaScript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

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] }