JS中的回调函数（callback）

最新推荐文章于 2023-07-20 09:27:56 发布

是小张呀！

最新推荐文章于 2023-07-20 09:27:56 发布

阅读量1.7k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_52099965/article/details/127909126

版权

1.什么是回调函数（callback）呢？

把函数当作一个参数传到另外一个函数中，当需要用这个函数是，再回调运行这个函数
回调函数是一段可执行的代码段，它作为一个参数传递给其他的代码，其作用是在需要的时候方便调用这段（回调函数）代码。（作为参数传递到另外一个函数中，这个作为参数的函数就是回调函数）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    function add(num1, num2, callback) {
        var sum = num1 + num2;
        callback(sum); 
    }

    function callNum(num) {
        console.log(num); // 3
    }

    add(1, 2, callNum);

   // 函数callNum作为一个参数传入到add函数中，但并不是马上起作用，而是var sum = num1 + num2; 
   // 运行完之后需要打印输出sum的时候才会调用这个函数。
   // 这个作为参数传递到另外一个函数中，这个作为参数的函数就是回调函数.

</script>
</html>

匿名回调函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    function callNum(num1, num2, callback) {
        var sum = num1 + num2;
        callback(sum);
    }

    callNum(1, 2, function (sum) {
        console.log(sum);  // 3
    });
</script>
</html>

2.回调函数有哪些特点？

不会立即执行
回调函数是一个闭包
执行前类型判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    function add(num1, num2, callback) {
        var sum = num1 + num2;
        console.log(typeof callback) // function
        //判定callback接收到的数据是一个函数
        if (typeof callback === 'function') {
            //callback是一个函数，才能当回调函数使用
            callback(sum);
        }
    }

    function callNum(num) {
        console.log(num) // 3
    }

    add(1,2, callNum)

</script>
</html>

3.回调函数中this的指向问题

回调函数调用时this的执行上下文并不是回调函数定义时的那个上下文，而是调用它的函数所在的上下文

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    function createData(callback){
        callback();
    }
    var obj ={
        name:'zs',
        data:function(){
            createData(function(n){
                console.log(this,1111);  //window 1111
                // this指向是 离它最近的或者嵌套级别的 function/方法的调用者
                // 这里离它最近的function是function(n)，会回到上面的callback()中，这时候调用者就不是obj而是window。
            })   
        }
    }
    obj.data();
</script>
</html>

解决回调函数this指向的方法1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    function createData(callback){
        callback('ls');
    }
    var obj ={
        name:'zs',
        data:function(){
            // var that = this;
            var that = this;   //这里的this指向obj，然后当一个变量取用
            createData(function(n){
                that.name = n;
                console.log(that.name) // ls
            })   
        }
    }
    obj.data();
</script>
</script>
</html>

解决回调函数this指向的方法2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    function createData(callback){
        callback('ls');
    }
    var obj ={
        name:'zs',
        data:function(){
            createData(n =>{ // 箭头函数
                this.name = n;
                console.log(this.name) // ls
            })   
        }
    }
    obj.data();
</script>
</script>
</html>