1.引言

利用回调函数来当参数，会极大的进步程序的灵活性。对回调函数很生疏，钻研了一下给的示例程序，感觉对回调函数有了根本的理解，记录下来，以备后用。

2.定义

回调函数就是一个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，咱们就说这是回调函数。回调函数不是由该函数的实现方间接调用，而是在特定的事件或条件产生时由另外的一方调用的，才会真正的执行回调函数外部的办法。

3.代码

JS代码

1 (function($){ 2     $.fn.shadow = function(opts){ 3         //定义的默认的参数 4         var defaults = { 5             copies: 5, 6             opacity:0.1, 7             //回调函数 8  copyOffset:function(index){ 9                 return{x:index,y:index};10             }11         };12         //将opts的内容合并到default中。13         var options = $.extend(defaults,opts);14         return this.each(function(){15             var $originalElement  = $(this);16             //设置参数对象17             for(var i=0;i<options.copies;i++)18             {19                 var offset = options.copyOffset(i);20                 $originalElement21                 .clone()22                 .css({23                     position:'absolute',24                     left:$originalElement.offset().left + offset.x,25                     top:$originalElement.offset().top + offset.y,26                     margin:0,27                     zIndex:-1,28                     //设置参数对象29                     opacity:options.opacity30                 })31                 .appendTo('body');32             }33         });34     };35 })(jQuery);36 $(document).ready(function(){37     $('h1').shadow({38         copies:5,39         copyOffset:function(index){40         return {x:-index,y:-2 * index};41         }42     });43 });

4.剖析

通过这段代码调试的时候进入的程序，便可了解回调函数的机制。通过对黄背景的四段代码退出断点。程序将会以以下的程序运行

39：先跑第39行，当DOM加载结束后运行了shadow()，跑完39行并不会间接跑40行。而是间接调到了shadow()函数定义的中央。在这里只是申明了copyOffset的函数指针。

2:这时候查看opts外面的内容Object { copies=5, copyOffset=function()}从这里能够看进去copyOffset只是一个function()，

8:开始走默认参数的copyOffset，与39行一样，不会间接进入回调函数外面的内容。

19：走到这里时，须要将对CopyOffset发出请求并传入了i作为参数。这时候i就是回调函数的参数index。

40:因为13行的”var options = $.Extend(defauflts,opts)”。opts的属性会笼罩掉default的属性，所以不会走9行默认的参数中的回调函数的执行办法，而是走了第40行的回调函数的办法。

5.总结

从下面的剖析能够看出，回调函数在参数中申明时，相当于只是申明了一个委托。等到用到这个参数的时候才会真正的执行回调函数外面的内容。

6.附html代码

 1 <!DOCTYPE html> 2  3 <html lang="en"> 4   <head> 5     <meta charset="utf-8"> 6     <title>Developing Plugins</title> 7  8     <link rel="stylesheet" href="08.css" type="text/css" /> 9     <link rel="stylesheet" href="ui-themes/smoothness/jquery-ui-1.10.0.custom.css" type="text/css" />10 11     <script src="jquery.js"></script>12     <script src="jquery-ui-1.10.0.custom.min.js"></script>13     <script src="08.js"></script>14   </head>15   <body>16     <div id="container">17       <h1>Inventory</h1>18       <table id="inventory">19         <thead>20           <tr class="two">21             <th>Product</th>22             <th>Quantity</th>23             <th>Price</th>24           </tr>25         </thead>26         <tfoot>27           <tr class="two" id="sum">28             <td>Total</td>29             <td></td>30             <td></td>31           </tr>32           <tr id="average">33             <td>Average</td>34             <td></td>35             <td></td>36           </tr>37         </tfoot>38         <tbody>39           <tr>40             <td><a href="spam.html" data-tooltip-text="Nutritious and delicious!">Spam</a></td>41             <td>4</td>42             <td>2.50</td>43           </tr>44           <tr>45             <td><a href="egg.html" data-tooltip-text="Farm fresh or scrambled!">Egg</a></td>46             <td>12</td>47             <td>4.32</td>48           </tr>49           <tr>50             <td><a href="gourmet-spam.html" data-tooltip-text="Chef Hermann's recipe.">Gourmet Spam</a></td>51             <td>14</td>52             <td>7.89</td>53           </tr>54         </tbody>55       </table>56     </div>57   </body>58 </html></pre>