这一讲来谈谈回调函数。
其实一句话就能概括这个东西：
回调函数就是把一个函数当做参数，传入另一个函数中。传进去的目的仅仅是为了在某个时刻去执行它。
如果不执行，那么你传一个函数进去干嘛呢？
就比如说对弈下棋，如果你都不想赢，那么你为什么要下棋？当然了，如果你达到了某种至高无上的境界，参悟出一个“道”来，就不一样了。
所谓手中无剑，心中有剑。写了一个函数，我虽然没有去执行它，但是在我心中已经执行了。
在此我们先不谈那么高大上的境界，先说点俗的，你想想啊，你好不容易写了一个function，你不去执行执行它，那你为什么要写呢？
##1.回调函数快速入门
先来个快速入门吧。
比如我有两个数字，分别为10和20，还定义了两个函数，一个是做加法，一个是做减法。
var num1 = 10; var num2 = 20; //加法 function add(num1,num2){ alert(num1 + num2); } //减法 function minus(num1,num2){ alert(num1 - num2); }
这样应该没问题，你肯定能看懂。
运行一下：
add(num1,num2); minus(num1,num2);
好的，没问题。现在来思考，有没有什么办法，我创造一个函数，同时具备了加法和减法的功能呢？
当然有了，我大不了传一个标志位flag,如果是0，代表加法，如果是1，就代表减法。
像这样：
function addOrMinus(flag,num1,num2){ if(flag == 0){ alert(num1 + num2); } if(flag == 1){ alert(num1 - num2); } }
这样固然是可以的，但是还有个问题，如果用户突然说，我不想要加减法了，我要做乘除法，那又该怎么办？用户的需求是千变万化的，如果我们把函数里面的内容写死，那么就显得非常不灵活。这个时候，你就会想，有没有什么办法，让函数的功能变得不确定起来呢？
我们在刚才的例子中，是这样实现加减法的，即传入一个标志位flag，如果flag = 1，就做减法，如果flag = 2，就做加法。也就是说，加法和减法的逻辑已经实现在函数里面写好了，所以，一旦我们需要做乘法和除法，就不得不修改函数体，对不对。
那与其这样，我们为什么不能把具体的逻辑实现交给用户呢？你要做加法，你就给我传一个加法的逻辑进来，你要做减法，你就给我传一个减法的逻辑进来。这样不就好了？看代码：
function addOrMinus(flag,num1,num2){ if(flag == 0){ alert(num1 + num2); } if(flag == 1){ alert(num1 - num2); } }
callback就是回调函数的意思，，定义一个函数和定义一个其他变量都是差不多的。比如你定义一个数字：
var a = 100;
是不是这样做的，那么定义一个函数不就是：
var fun = function(){ alert('你好！'); }
不是一个意思吗，不知道我这样写你是不是好理解一点呢？
我们定义了一个变量a，它的值为100，那么如果我们使用这个a，是不存在什么执不执行的问题的，直接调用就OK了，这就是所谓的执行了一次右查询。
比如我写：alert(a),那么a的值就被我拿到了，并且使用了。
可函数的话呢，有点不一样。比如上面的例子，你总不可能这么写吧。
fun;
你觉得这样子会执行吗？肯定不会嘛，因为函数它必须要打一个括号才能执行啊！你不打括号的话它就执行不了的。
fun();
这样子写，它才会执行函数体里面的内容。
再回过头来看之前的例子：
function compute (a,b,callback){ callback(a,b); }
我定义了一个函数，叫做compute，它接受了三个参数，分别是a，b,callback。你不要觉得害怕，说callback是啥玩意啊，是不是一定要写callback呢？不是的啊，你不要多想了，callback只是为了让别人一看就知道是回调函数，这样显得更加语义化。实际上你写aaa,bbb,ccc都没有问题。他只是一个参数的名字啊。你叫阿猫阿狗都没事的。你信不信咯？它无非就只是一个变量的名字而已。
比如你写 var a = 10; 这个你肯定知道，我写a只是随便写的，写b、c、都可以，没有问题。那callback不也是一个意思吗？我之所以要这么啰嗦，是希望以后如果你看到别人js框架里面，或者某个API文档也写callback，你不要再害怕了，也不要再恐惧了，觉得哎呀好难，callback是什么东西？？它就是一个名字而已。
OK，回到这个函数。
function compute (a,b,callback){ callback(a,b); }
你说，我这样一写了之后，compute函数有没有被执行？对了，当然是没有。因为我没打括号嘛，作为一个函数，打了括号才会被执行。同样的，在compute的函数体里面，传进去的callback是不是打了括号，这么写的用意很明显，它就是为了在函数体里面把你传进来的callback函数执行掉。并且在执行的时候，把另外两个参数传给它。
compute函数承担了计算的任务，具体怎么计算，我不管，计算规则由你决定！也就是说，你给我一个回调函数callback，我不管三七二十一，帮你执行掉。就这么简单，回调函数就是这么简单，没有什么更加高深的东西在里面了。
##2.回调函数应用场景
快速入门就到这里，接下来，我们来看几个典型的例子。****
首先，我们在运用jQuery的时候，是不是总是写这样的代码：
$(function(){ });
很显然，这个就是回调函数，$本身就是一个函数的名字，没有道理不相信，我就问你，它是不是打了括号？我们把里面的 function(){} 去掉：
$();
是不是就变成这样了？那好，我就想请问一下了，你见过除了函数之外的什么东西要打括号吗？有没有，就问你一句话，有还是没有？只有函数才能打括号啊，你写一个var a = 10; 能打括号吗？所以，对jQuery来说，它本身就是一个函数，这一点要明确。
接下来，是不是传了一个回调函数进去了？
$(function(){ });
没错，的确是的。我在函数体里面alert一下，它肯定会给我弹出一个提示来。为什么会这样呢，毫无疑问，jQuery肯定在里面把这个回调函数执行了。就比如：
var $ = function(callback){ callback(); }
当然，这只是举一个例子，实际情况肯定要比这个复杂得多。
$(function(){ });
这个函数类似于window.onload。
接下来，我们来个例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <title></title> <script> $(function(){ $("#box").on('click',function(){ alert(); }); }); </script> </head> <body> <div style='padding: 50px;display:inline-block;background: blue;' id='box'></div> </body> </html>
我在body区域画了一个蓝色的方块，并且通过jQuery的方式，给它绑定了一个点击事件。你可能会说，这么简单的代码我还能看不懂？我天天写这种代码呢！点击事件就是典型的回调函数应用，因为我哪里知道你点击之后要干什么啊？这当然要你自己决定啊。所以，你自己传一个回调函数进去。
$("#box").on('click',function(){ alert(); });
现在，我给点击事件里面的回调函数加一个参数e。
$("#box").on('click',function(e){ alert(); });
你可能会觉得奇怪，心想，纳尼，这个e是什么鬼？？然后马上又一想，我好像没有在哪里定义一个叫做e的变量啊。如果你这么想了，说明你还是没有理解啥叫函数。亲啊，这是一个函数啊，函数的参数是e，e只是一个名字啊，你写aaa,bbb,ccc都行的！
$("#box").on('click',function(aaa){ alert(); });
一个名字而已嘛，而且，这里只是定义了一个函数：
function(e){ alert(); }
我就问你，有没有打括号？如果你说有啊，（e）不是括号吗？如果你真的这么回答，那我就要哭了。。。回到正题，这里是不是还没有打括号？也就是说，我只是写了一个还未被执行的函数传进去了，这是一个回调函数。我知道，我传进去以后，你肯定会在某个地方打一个括号帮我执行的，就算不执行，它也肯定会把这个回调函数赋值给其他变量。这是第一点，第二点，我写的这个函数，还带了一个参数，参数的名字叫e。
OK，非常好。也就是说，我只管定义了一个有参数的函数，具体这个参数是啥，什么时候传进来，我不知道。这是由jQuery的on函数决定的。如果你还是不理解的话呢，我们先写一个简单点的例子：
function on(event,callback){ if(event == 'click'){ var e = "Hello World"; callback(e); } } on('click',function(e){ alert(e); });
这样就很好理解了吧，对的，就是这么个意思。所以，当你看到别人写回调函数，还加了个参数e，最起码，不要再害怕了，它根本不高端，说来说去都是JavaScript的基础知识。所以有的人不重视基础，虽然也能完成开发任务，但却往往只是照猫画虎而已，真要出了点问题，就很难解决了。
让我们回到代码：
$("#box").on('click',function(e){ alert(); }); 这是jQuery给我们封装好的函数，专门用来绑定事件的。那么在这一讲的最后，我们就来模拟jQuery的写法，封装一个类似的功能吧！ 页面上的div是这样的：
``` 第一步，是不是要专门写一个函数，取到这个div。在js中，我们可以用document.getElementById的方式取到dom元素，现在我们将这个方法也单独封装起来。 ``` var $ = function(id){ return document.getElementById(id); } ``` 这样就行了，可是有个问题，这个函数返回的是一个dom对象，而标准的dom元素是没有绑定事件的方法的。所以，我们不能直接返回dom，而应该返回一个json。（json虽然是后面的内容，这里先提前用一下吧）
我返回一个 json ，json的用处就大了，它是一个实实在在的对象，既有属性也有方法。在json中，属性和方法之间都是用逗号分隔的。
var $ = function(id){ return { element : document.getElementById(id) , on : function(event,callback){ this.element['on' + event] = callback; } } }
关于this呢，我会在以后的章节中详细讲的，现在先这么用。
如果用js的方法给dom元素添加一个点击事件，一般我们会这么写：
dom.onclick = function(){} dom['onclick'] = function(){}
两种写法都可以哈，这样应该比较好理解了吧。我返回的json中，有一个函数叫做on，专门用来绑定事件的。比如现在我这么调用：
window.onload = function(){ $('box').on('click',function(){ $('box').element.style.background = 'green'; }); }
我给div添加一个点击事件，效果就是变换一下背景色。
效果是有的，好的，那么这一讲先到这里了。
作业：
作业要求（自行编写 $ 函数和 operation 函数，实现以下的调用过程，不允许使用jQuery）： 注意“#”的处理，#代表id选择器。 $('#box').operation(function(){ //自行实现回调函数，将box的背景色变为pink });
