JavaScript中的回调函数(callback)

Posted Rogn

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript中的回调函数(callback)相关的知识,希望对你有一定的参考价值。

什么是回调函数

In computer programming, a callback is a piece of executable code that is passed as an argument to other code, which is expected to call back (execute) the argument at some convenient time
[引自 维基百科 callback]

回调函数是一段可执行的代码段,它作为一个参数传递给其他的代码,其作用是在需要的时候方便调用这段(回调函数)代码。(有点像C语言中的函数指针??)

javascript中函数也是对象的一种,同样对象可以作为参数传递给函数,因此函数也可以作为参数传递给另外一个函数,这个作为参数的函数就是回调函数。

回调函数

function add(num1, num2, callback){
    var sum = num1 + num2;
    callback(sum);
}

function print(num){
    console.log(num);
}

add(1, 2, print);        //=>3

匿名回调函数

function add(num1, num2, callback){
    var sum = num1 + num2;
    callback(sum);
}

add(1, 2, function(sum){
    console.log(sum);        //=>3
});

jQuery中大量的使用了回调函数

$("#btn").click(function() {
  alert("button clicked");
});

我们为什么需要回调?

有一个非常重要的原因 —— JavaScript 是事件驱动的语言。这意味着,JavaScript 不会因为要等待一个响应而停止当前运行,而是在监听其他事件时继续执行。来看一个基本的例子:

function first(){
  console.log(1);
}

function second(){
  console.log(2);
}

first();
second();

正如你所料,first 函数首先被执行,随后 second 被执行 —— 控制台输出下面内容:

1
2
但如果函数 first 包含某种不能立即执行的代码会如何呢?例如我们必须发送请求然后等待响应的 API 请求?为了模拟这种状况,我们将使用 setTimeout,它是一个在一段时间之后调用函数的 JavaScript 函数。我们将函数延迟 500 毫秒来模拟一个 API 请求,新代码长这样:
function first(){
// 模拟代码延迟
  setTimeout( function(){
console.log(1);
  }, 500 );
}

function second(){
  console.log(2);
}

first();
second();

现在理解 setTimeout() 是如何工作的并不重要,重要的是你看到了我们已经把 console.log(1); 移动到了 500 毫秒延迟函数内部。那么现在调用函数会发生什么呢?

2
1

即使我们首先调用了 first() 函数,我们记录的输出结果却在 second() 函数之后。

这不是 JavaScript 没有按照我们想要的顺序执行函数的问题,而是 JavaScript 在继续向下执行 second() 之前没有等待 first() 响应的问题。

所以为什么给你看这个?因为你不能一个接一个地调用函数并希望它们按照正确的顺序执行。回调正是确保一段代码执行完毕之后再执行另一段代码的方式

回调函数有哪些特点?

不会立刻执行

回调函数作为参数传递给一个函数的时候,传递的只是函数的定义并不会立即执行。和普通的函数一样,回调函数在函调用函数数中也要通过()运算符调用才会执行。

是个闭包

回调函数是一个闭包,也就是说它能访问到其外层定义的变量。

执行前类型判断

在执行回调函数前最好确认其是一个函数。

function add(num1, num2, callback){
    var sum = num1 + num2;
    if(typeof callback === ‘function‘){
        callback(sum);
    }
}

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的。

关于this执行上下文的问题可以通过apply方法解决。

var obj = {
    sum: 0,
    add: function(num1, num2){
        this.sum = num1 + num2;
    }
};

function add(num1, num2, callbackObj, callback){
    callback.apply(callbackObj, [ num1, num2 ]);
};

add(1,2, obj, obj.add);
console.log(obj.sum);            //=>3
console.log(window.sum);        //=>undefined

允许传递多个回调函数

一个函数中可以传递多个回调函数,典型的例子如jQuery

function successCallback() {
    // Do stuff before send?
}
?function successCallback() {
    // Do stuff if success message received?
}?
?function completeCallback() {
    // Do stuff upon completion?
}
?function errorCallback() {
    // Do stuff if error received?
}
$.ajax({
    url: "http://fiddle.jshell.net/favicon.png",
    success: successCallback,
    complete: completeCallback,
    error: errorCallback
});

回调函数嵌套

一个回调函数中可以嵌入另一个回调函数,对于这种情况出现多层嵌套时,代码会难以阅读和维护,这个时候可以采用命名回调函数的方式调用,或者采用模块化管理函数,也可以用promise模式编程。

从node-mongodb-native,一个适用于Node.js的MongoDB驱动中拿来了一个例子:

var p_client = new Db(‘integration_tests_20‘, new Server("127.0.0.1", 27017, {}), {‘pk‘:CustomPKFactory});
   p_client.open(function(err, p_client) {
       p_client.dropDatabase(function(err, done) {
           p_client.createCollection(‘test_custom_key‘, function(err, collection) {
               collection.insert({‘a‘:1}, function(err, docs) {
                   collection.find({‘_id‘:new ObjectID("aaaaaaaaaaaa")}, function(err, cursor) {
                       cursor.toArray(function(err, items) {
                           test.assertEquals(1, items.length);
 
                           // Let‘s close the db
                           p_client.close();
                       });
                   });
               });
           });
       });
   });

 

 

参考链接:

1. https://cnodejs.org/topic/564dd2881ba2ef107f854e0b

2. https://juejin.im/post/594b3607128fe100650355c7

3. https://www.jianshu.com/p/84cc8732689c

以上是关于JavaScript中的回调函数(callback)的主要内容,如果未能解决你的问题,请参考以下文章

理解javascript中的回调函数(callback)

理解javascript中的回调函数(callback)

JavaScript之callback回调函数

深入理解jQuery中的callback

回调函数(callback)是啥? ,,

JavaScript系列之回调函数callback