理解与使用Javascript中的回调函数

js里的解释:

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

从字面上理解下来就是，回调就是一个函数的调用过程。 假如函数a有一个参数，这个参数是个函数b，当函数a执行完以后执行函数b。那么这个过程就叫回调。

　　其实中文很容易理解：回调，回调，就是回头调用的意思。函数a的事干完，回头再调用函数b。

举个现实的例子：你去和女朋友约会，约会结束后你送女朋友回家，离别时，你肯定说：“到家了给我发条信息，我很担心你。”对不，然后你女朋友回家以后还真给你发了条信息。小伙子，你有戏了。

　　其实这就是一个回调过程。你留个个函数b（要求女朋友给你发条信息）给你女朋友，然后你女朋友回家，回家的动作是函数a。她必须先回到家以后，函数a的内容执行完了，再执行函数b，然后你就收到一条信息了。

　　这里必须清楚一点：函数b是你以参数参数形式传给a的，那么函数b就叫回调函数。

也许有人有疑问了：一点要以参数形式传过去吗，我不可以直接在函数a里面调用函数b吗？确实可以。求解中。

　　<解惑:如果你直接在函数a里调用的话，那么这个回调函数就被限制死了。但是使用函数做参数就有下面的好处：当你a(b)的时候函数b就成了回调函数，而你还可以a(c)这个时候，函数c就成了回调函数。如果你写成了function a(){...;b();}就失去了变量的灵活性。>

　　下面用代码来证实我的理解。

<html>
   
<head>
   
<title>回调函数(callback)</title>
<script language="javascript" type="text/javascript">
function a(callback)
{   
    alert("我是parent函数a！");
    alert("调用回调函数");
    callback();
}
function b(){
alert("我是回调函数b");
   
}
function c(){
alert("我是回调函数c");
   
}
   
function test()
{
    a(b);
   a(c);
}
   
</script>
</head>
   
<body>
<h1>学习js回调函数</h1>
<button onClick=test()>click me</button>
<p>应该能看到调用了两个回调函数</p>
</body>
   
</html>

在Javascript中，函数是第一类对象，这意味着函数可以像对象一样按照第一类管理被使用。既然函数实际上是对象：它们能被“存储”在变量中，能作为函数参数被传递，能在函数中被创建，能从函数中返回。

因为函数是第一类对象，我们可以在Javascript使用回调函数。在下面的文章中，我们将学到关于回调函数的方方面面。回调函数可能是在Javascript中使用最多的函数式编程技巧，虽然在字面上看起来它们一直一小段Javascript或者jQuery代码，但是对于许多开发者来说它任然是一个谜。在阅读本文之后你能了解怎样使用回调函数。

回调函数是从一个叫函数式编程的编程范式中衍生出来的概念。简单来说，函数式编程就是使用函数作为变量。函数式编程过去 - 甚至是现在，依旧没有被广泛使用 - 它过去常被看做是那些受过特许训练的，大师级别的程序员的秘传技巧。

幸运的是，函数是编程的技巧现在已经被充分阐明因此像我和你这样的普通人也能去轻松使用它。函数式编程中的一个主要技巧就是回调函数。在后面内容中你会发现实现回调函数其实就和普通函数传参一样简单。这个技巧是如此的简单以致于我常常感到很奇怪为什么它经常被包含在讲述Javascript高级技巧的章节中。

　　 什么是回调或者高阶函数

　　一个回调函数,也被称为高阶函数，是一个被作为参数传递给另一个函数（在这里我们把另一个函数叫做“otherFunction”）的函数，回调函数在otherFunction中被调用。一个回调函数本质上是一种编程模式（为一个常见问题创建的解决方案），因此回调函数也叫做回调模式。

　　　下面是一个在jQuery中使用回调函数简单普遍的例子：

　　　// 注意到 click 方法中使用一个函数而不是一个变量

//它就是回调函数
$("#btn").click(function(){
   alert('Btn 1 Clicked'); 
})

　　上面的例子看到，我们将一个函数作为参数传递给了click方法。click方法会调用（或者执行）我们传递给它的函数。这是javascript中回调函数的典型用法，它在jQuery 中广泛被使用。

　　下面是另一个JavaScript中典型的回调函数的例子：

var friends = ["Mike","Stacy","Andy","Rick"];
 
friends.forEach(function(item,index){
   console.log(index + 1 + "." + item); //1.mike 2. Stacy ,3. Andy , 4. Rick     
})

　　再一次，注意到我们讲一个匿名函数（没有名字的函数）作为参数传递给了forEach方法。

　　到目前为止，我们将匿名函数作为参数传递给了另一个函数或方法。在我们看更多的实际例子和编写我们自己的回调函数之前，先来理解回调函数是怎样运作的。

　　回调函数是怎样运作的？

　　因为函数在JS中是第一类对象，我们像对待对象一样对待函数，因此我们能像传递变量一样传递函数，在函数中返回函数，在其他函数中使用函数。当我们将一个回调函数作为参数传递给另一个函数是，我们仅仅传递了函数定义。我们并没有在参数中执行函数。我们并不传递像我们平时执行函数一样带有一对执行小括号（）的函数。

　　需要注意的很重要的一点是回调函数并不会马上被执行，它会在包含它的函数内的某个特定时间点被“回调”(就像它的名字一样)。因此，即使第一个jqery例子如下所示“

//匿名函数不会再参数中被执行
//这是一个回调函数    
$("#btn_1").click(function(){
    alert("Btn 1 Clicked");
});

　　这个匿名函数稍后会在函数体内被调用。即使有名字，它依然在包含它的函数内通过arguments对象获取。

　　回调函数是闭包

　　我们将一个回调函数作为变量传递给另一个函数时，这个回调函数再包含它的函数内的某一点执行，就好像这个回调函数是在包含它的函数中定义的一样。

　　这意味着回调函数本质上是一个闭包。

　　正如我们所知，闭包能够进入包含它的函数的作用域，因此回调函数能获取包含它的函数中的变量，以及全局作用域中的变量。

实现回调函数的基本原理

　　回调函数并不复杂，但是在我们开始创建并使用毁掉函数之前，我们应该熟悉几个实现回调函数的基本原理。

1. 使用命名或匿名函数作为回调

在前面的jQuery例子以及forEach的例子中，我们使用了再参数位置定义的匿名函数作为回调函数。这是在回调函数使用中的一种普遍的魔术。另一种常见的模式是定义一个命名函数并将函数名作为变量传递给函数。比如下面的例子：

//全局变量
var allUserData = [];
 
//普通的logStuff函数，将内容打印到控制台     
function logStuff (userData){
    if ( typeof userData === "string")
    {
        console.log(userData);
    }
    else if ( typeof userData === "object"){
        for(var item in userData){
            console.log(item + ": " + userData[item]);
        }
    }
} 
 
//一个接收两个参数的函数，后面一个是回调函数     
function getInput (options, callback){
    allUserData.push(options);
    callback(options);
}
 
//当我们调用getInput函数时，我们将logStuff作为一个参数传递给它     
//因此logStuff将会在getInput函数内被回调（或者执行）     
getInput({name:"Rich",speciality:"Javascript"}, logStuff);
//name:Rich
//speciality:Javascript

　　2.传递参数给回调函数

　　既然回调函数在执行时仅仅是一个普通函数，我们就能给它传递参数。我们能够传递任何包含它的函数的属性（或者全局书讯给）作为回调函数的参数。在前面的例子中，我们将options作为一个参数传递给了毁掉函数。现在我们传递一个全局变量和一个本地变量：

//全局变量
var generalLastName = "Cliton"；
 
function getInput (options, callback){
    allUserData.push (options);
    //将全局变量generalLastName传递给回调函数
    callback(generalLastName,options);
}