js的回調函數詳解

回調函數，好多人雖然知道意思，可是仍是隻知其一;不知其二。至於怎麼用，仍是有點糊塗。網上的一些相關的也沒有詳細的說一下是怎麼回事，說的比較片面。下面我只是說說我的的一點理解，大牛勿噴。咱們來看一下一個粗略的一個定義「函數a有一個參數，這個參數是個函數b，當函數a執行完之後執行函數b。那麼這個過程就叫回調。」，這句話的意思是函數b以一個參數的形式傳入函數a並執行，順序是先執行a ，而後執行參數b,b就是所謂的回調函數。咱們先來看下面的例子。

代碼以下:

function  a(callback){
    alert('a');
    callback.call(this);//或者是 callback（）,  callback.apply(this),看我的喜愛
}
function  b(){
    alert('b');
}
//調用
a(b);

  這樣的結果是先彈出 'a'，再彈出‘b'。這樣估計會有人問了「寫這樣的代碼有什麼意思呢？好像沒太大的做用呢！」

       是的，其實我也以爲這樣寫沒啥意思，「若是調用一個函數就直接在函數裏面調用它不就好了」。我這只是給你們寫個小例子，作初步的理解。真正寫代碼的過程當中不多用這樣無參數的，由於在大部分場景中，咱們要傳遞參數。來個帶參數的：

代碼以下:

function  c(callback){
      alert('c');
      callback.call(this,'d');
    }
//調用
c(function(e){
    alert(e);
});

     這個調用看起來是否是似曾相識，這裏e參數被賦值爲'd'，咱們只是簡單的賦值爲字符竄，其實也能夠賦值爲對象。Jquery裏面是否是也有個e參數，下面咱們就來說講
Jquery裏面的e參數是如何被回調賦值的。

       Jquery框架我想你們不陌生了，出來了很久，開發的時候都在用，比較簡單，api網上搜起來很方便，上手快。在Jquery框架下，咱們有時候要獲取事件中的一些參數，好比我要獲取當前點擊的座標，點擊的元素對象。這個需求在Jquery裏面好辦  ：

代碼以下:

$("#id").bind('click',function(e){
    //e.pageX ,e.pageY ,e.target.....各類數據
});

用起來卻是挺方便，其實這個e參數的賦值也是經過回調函數來實現的，這個參數是用回調參數給它賦予了一個對象值，仔細研究過JJquery源碼的朋友應該發現了這一點。

還有Ajax裏面   $.get('',{},function(data){})    data這個參數也是一樣的原理。

        咱們來看看Jquery事件對象裏面是怎麼應用回調函數的。

       爲了方便，我簡單的寫了一下$相關的一些實現，以前寫過「小談Jquery」裏面有比較接近框架實現的方法，我下面只是寫一個簡易的選擇器。

代碼以下:

<script>
     var  _$=function (id){ 
               this.element=  document.getElementById(id); 
          }
       _$.prototype={
            bind:function(evt,callback){
                var   that=this;
                if(document.addEventListener){
                    this.element.addEventListener(evt, function(e){
                        callback.call(this,that.standadize(e));
                    }  ,false);
                }else if(document.attachEvent){
                    this.element.attachEvent('on'+evt,function(e){
                        callback.call(this,that.standadize(e));
                    });
                }else{
                	this.element['on'+evt]=function(e){
                		callback.call(this,that.standadize(e));
                	};
                }
            },
            standadize:function(e){
                 var  evt=e||window.event;
                 var  pageX,pageY,layerX,layerY;
                 // pageX 橫座標 pageY縱座標 layerX點擊處位於元素的橫座標 layerY點擊處位於元素的縱座標
                 if(evt.pageX){
                     pageX=evt.pageX;
                     pageY=evt.pageY;
                 }else{
                    pageX=document.body.scrollLeft+evt.clientX-document.body.clientLeft;
                    pageY=document.body.scrollTop+evt.clientY-document.body.clientLTop;
                 };
                 if(evt.layerX){
                     layerX=evt.layerX;
                     layerY=evt.layerY;
                 }else{
                     layerX=evt.offsetX;
                     layerXY=evt.offsetY;
                 };
                 return  {
                    pageX:pageX,
                    pageY:pageY,
                    layerX:layerX,
                    layerY:layerY
                 }
            }
       }
       window.$=function(id){
            return  new _$(id);
       }
       $('container').bind('click',function(e){
            alert(e.pageX);
       });
       $('container1').bind('click',function(e){
            alert(e.pageX);
       });
</script>

這段代碼咱們主要看standadize函數的實現，兼容性的代碼，就很少說了，返回的是一個對象 

代碼以下:

return  {
    pageX:pageX,
    pageY:pageY,
    layerX:layerX,
    layerY:layerY
}

 而後再看bind函數裏面的代碼    callback.call(this,that.standadize(e))，這段代碼其實就是給e參數賦值了，是用callback回調實現的。

callback 函數被調用的時候傳入的是匿名函數

代碼以下:

function(e){
}

而callback.call(this,that.standadize(e))至關因而執行了這麼一段代碼 

代碼以下:

(function(e){
})(standadize(e))

這也是Jquery用回調函數比較經典的地方，e參數就是這麼被賦值的，說了這些大家也大概有個瞭解了，以及怎麼使用了。

回調在各類框架中應用的比較多，有時候本身寫一些東西的時候也能夠根據實際狀況用用看