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参数就是这么被赋值的，说了这些大家也大概有个了解了，以及怎么使用了。

回调在各类框架中应用的比较多，有时候本身写一些东西的时候也能够根据实际状况用用看