JavaScript中的回调函数（callback）

前言

callback，大家都知道是回调函数的意思。如果让你举些callback的例子，我相信你可以举出一堆。但callback的概念你知道吗？你自己在实际应用中能不能合理利用回调实现功能？ 我们在平时的学习中容易犯不去深究的病，功能实现了也就不再去追其原由，对一些概念模模糊糊。如果对callback没有一个清楚的理解，估计你在学习Node.js后会崩溃，因为callback是Node.js三大核心之一。

一 .回调函数

回调函数的概念

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.

以上是Google的解释，非常清晰简明，小编令人窒息的四级英语水平都能看懂。
下面给一个回调的例子

function doSomething(msg, callback){
    alert(msg);
    if(typeof callback == "function") 
    callback();
 } 
doSomething("回调函数", function(){
    alert("匿名函数实现回调!");
 }); 

我们再来看几个经典的回调函数代码，我保证你一定用过他们：

回调函数例子.png

从上面的例子，我们可以看出回调与同步、异步并没有直接的联系，回调只是一种实现方式，既可以有同步回调，也可以有异步回调，还可以有事件处理回调和延迟函数回调，这些在我们工作中有很多的使用场景。

---

二.把使用this对象的函数作为回调函数(陷阱)

当回调函数是一个使用this对象的函数时，我们必须改变执行回调函数的调用对象来保证this对象的上下文。在讲这个问题之前，我们必须先了解JS于this的指向。我们这里不详细谈这个问题，我直接说下自己学习过程总结的判断this指向的两条经验（既然是自己的经验，那就不一定对，希望大家指正）：
（1）this的指向是在函数执行的时候确定的，在函数定义的时候是确定不了，实际上this的最终指向的是那个调用它的对象
（2）调用执行函数时，“.”前面是什么，this就是什么。前面没有对象，就是window了。（好粗暴）

回到使用this对象的函数作为回调函数这个问题，我们首先来看看下面这段代码：
//定义一个拥有一些属性和一个方法的对象 //我们接着将会把方法作为回调函数传递给另一个函数

var clientData = {
    id: 096545,
    fullName: "Not Set",
    //setUsrName是一个在clientData对象中的方法
    setUserName: function (firstName, lastName){
        this.fullName = firstName + " " + lastName;
    }
} 

function getUserInput(firstName, lastName, callback){
    //code .....

    //调用回调函数存储
    callback(firstName, lastName);
}

getUserInput("Barack","Obama",clientData.setUserName);

console.log(clientData.fullName);  //Not Set

console.log(window.fullName);  //Barack Obama

在上面的代码中，当clientData.setUsername被执行时，this.fullName并没有设置clientData对象中的fullName属性。相反，它将设置window对象中的fullName属性，这是因为callback中的this指向window的缘故。

使用Call和Apply函数来改变this指向

我们可以使用Call或者Apply函数来解决上面你的问题。到目前为止，我们知道了每个Javascript中的函数都有两个方法:Call 和 Apply。这些方法被用来设置函数内部的this对象以及给此函数传递变量。
这里我们演示Apply函数实现，Call函数类似。（call接收的第一个参数为被用来在函数内部当做this的对象，传递给函数的参数被挨个传递。Apply函数的第一个参数也是在函数内部作为this的对象，然而最后一个参数确是传递给函数的值的数组。）

Apply函数：

//注意到我们增加了新的参数作为回调对象，叫做“callbackObj”
function getUserInput(firstName, lastName, callback ,callbackObj){
         //code .....

        callback.apply(callbackObj, [firstName, lastName]);
}

getUserInput("Barack", "Obama", clientData.setUserName, clientData);

console.log(clientData.fullName); //Barack Obama

使用Apply函数正确设置了this对象，我们现在正确的执行了callback并在clientData对象中正确设置了fullName属性

---

三.回调函数是实现异步编程的利器

在程序运行中，当某些请求过程漫长，我们有时没必要选择等待请求完成继续处理下一个任务，这时使用回调函数进行异步处理可以大大提高程序执行效率。例如：AJAX请求。若是使用回调函数进行处理，代码就可以继续进行其他任务，而无需空等。实际开发中，经常在javascript中使用异步调用！
下面有个使用AJAX加载XML文件的示例，并且使用了call()函数，在请求对象（requested object）上下文中调用回调函数。

function fn(url, callback){
 var httpRequest;　　　　//创建XHR
 httpRequest = window.XMLHttpRequest ? new XMLHttpRequest() :　　　//针对IE进行功能性检测
　　　　window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : undefined;
  
 httpRequest.onreadystatechange = function(){
  if(httpRequest.readystate === 4 && httpRequest.status === 200){　　//状态判断
   callback.call(httpRequest.responseXML); 
  }
 };
 httpRequest.open("GET", url);
 httpRequest.send();
}
 
fn("text.xml", function(){　　　　//调用函数
 console.log(this); 　　              / /此语句后输出
});
 
console.log("this will run before the above callback.");　　//此语句先输出

我们请求异步处理，意味着我们开始请求时，就告诉它们完成之时调用我们的函数。在实际情况中，onreadystatechange事件处理程序还得考虑请求失败的情况，这里我们是假设xml文件存在并且能被浏览器成功加载。这个例子中，异步函数分配给了onreadystatechange事件，因此不会立刻执行。
最终，第二个console.log语句先执行，因为回调函数直到请求完成才执行。

在Javascript编程中回调函数经常以几种方式被使用，尤其是在现代web应用开发以及库和框架中：

• 异步调用（例如读取文件，进行HTTP请求，动态加载js文件，加载iframe资源后，图片加载完成执行回调等等）
• 事件监听器/处理器
• setTimeout和setInterval方法
• 一般情况：精简代码

---

4.“回调地狱”问题以及解决方案

这么多回调嵌套，我还没遇到过。下面内容是直接从网上copy过来，大家看下，还是很好理解的。
在执行异步代码时，无论以什么顺序简单的执行代码，经常情况会变成许多层级的回调函数堆积以致代码变成下面的情形。这些杂乱无章的代码叫做回调地狱因为回调太多而使看懂代码变得非常困难。我从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();
                       });
                   });
               });
           });
       });
   });

你应该不想在你的代码中遇到这样的问题，当你当你遇到了-你将会是不是的遇到这种情况-这里有关于这个问题的两种解决方案。

给你的函数命名并传递它们的名字作为回调函数，而不是主函数的参数中定义匿名函数。
模块化L将你的代码分隔到模块中，这样你就可以到处一块代码来完成特定的工作。然后你可以在你的巨型应用中导入模块。

作者：echozzh
链接：https://www.jianshu.com/p/84cc8732689c
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。