addEvent函数

【本文主要是借addEvent函数说明call，apply和Array.prototype.slice.call的用法】

 

首先看最普通写法：

var addEvent = function(obj,eventType,fn){
    if(obj.addEventListener){
        obj.addEventListener(eventType,fn,false);
    }else if(obj.attachEvent){
        obj.attachEvent('on'+eventType,fn);
    }else{
        obj['on'+eventType] = fn;
    }
};

这样写咋一看没啥问题了，用到时候才发现，回调函数中的this指针并非指向被绑定的对象，而是window对象。如果我们要获取当前对象，那就得通过event.target来获取了，很麻烦。

 

有没有办法让this指针指向我们期望的对象呢？找了一下javascript的函数库，找到了两个很有用的函数，call和apply，这两个函数的作用就是可以改变this指针的指向。

于是addEvent现在变成了：

var addEventV2 = function(obj,eventType,fn){
    var cfn = function(e){
        fn.call(obj,e);
    };
    if(obj.addEventListener){
        obj.addEventListener(eventType,cfn,false);
    }else if(obj.attachEvent){
        obj.attachEvent('on'+eventType,cfn);
    }else{
        obj['on'+eventType] = cfn;
    }
};

addEvent与addEventV2的区别是后者重新包装了回调函数，用fn.call(obj)使fn函数里的this改为指向obj。

 

好了，现在回调函数可以直接通过this来获取当前对象了，这个函数是否还有可以改进的地方？例如，可以在绑定时传递参数？

假设，我们希望addEvent函数能够支持这样：

addEvent(document.getElementById('myid'),'click',function(e,a,b,c){
　　.......
},1,2,3);

向回调函数传递三个变量，a，b，c ，那么函数可以这样写：

var addEventV3 = function(obj,eventType,fn){
    var args = Array.prototype.slice.call(arguments, 3);
    var cfn = function(e){
        fn.apply(obj,[e].concat(args));
    };
    if(obj.addEventListener){
        obj.addEventListener(eventType,cfn,false);
    }else if(obj.attachEvent){
        obj.attachEvent('on'+eventType,cfn);
    }else{
        obj['on'+eventType] = cfn;
    }
};

addEventV3和addEventV2相比有几个不同的地方。

首先可以发现，原来的call函数改成了apply。这两个函数有什么区别呢？很简单，两者仅在传递参数时有所不同。

call传递参数的方式：

fn.call(obj,arg1,arg2,arg3,arg4,......);

apply传递参数的方式：

fn.apply(obj,args);

如何判断应该用哪个函数呢？很简单，如果你知道你要传递多少个参数，那就用call；否则用apply。

 

其次，函数的第一行是Array.prototype.slice.call(arguments, n)，这个写法很常见，这句的意思是“返回从第n+1个参数开始的参数数组”。因为arguments并不是真正的数组，所以通过这样写可以返回一个真正的数组，方便后面处理。看到这里有些人可能会问，为什么要返回第4个参数后的参数数组？看函数定义var addEventV3 = function(obj,eventType,fn)前面三个参数已经使用了，因此我们额外传递的参数是从第4个开始。

 

最后，我们在给回调函数传递参数时的写法是：[e].concat(args)。这里应该很好理解。我们将event作为第一个参数，并于其余的参数合并为一个大数组，传递给回调函数。

转载于:https://www.cnblogs.com/lefeng/archive/2012/05/12/2497529.html