對js中回呼函數的一些看法_javascript技巧

最近在忙公司android的項目，所以也就很少抽時間來寫些東西了。剛閑下來，我就翻了翻之前看的東西。做了android之後更加感覺到手機端開發的重要性，現在做native App  和Web App是主流，也就是說現在各種基於瀏覽器的web app架構也會越來越火爆了，做js的也越來越有前途。我也決定從後端開發漸漸向前端開發和手機端開發靠攏，廢話不說了，我們來切入正題“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”裡面有比較接近架構實現的方法，我下面只是寫一個簡易的選取器。

<div id="container"  style="width:200px;height:200px;background-Color:green;"></div><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參數就是這麼被賦值的，說了這些你們也大概有個瞭解了，以及怎麼使用了。

回調在各種架構中應用的比較多，有時候自己寫一些東西的時候也可以根據實際情況用用看。

以上這篇對js中回呼函數的一些看法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援雲棲社區。