Jquery的$(selector).each()和$.each()区别实例详解

　我们都用过Jqurey中的each函数，都知道each()有两种方式去调用，一种是通过$.each()调用，另一种是$(selector).each()去调用，那么它们之间有什么区别？

　　翻看一下Jquery源码就会知道，$.each()是核心的实现，$(selector).each()是调用的$.each()，先来分析一下$.each()的源码(在底部)：

 　  each(obj,callback,args)函数接收3个参数：obj--要遍历的对象或数组、callback--要遍历执行的回调函数、args--自己指定的数组（先无视）。

  jQuery中each方法的实现使用call方法，call方法可以设置上下文，第一，在下例中数组each效果一样，为什么不直接调用呢？

通过call 可以改变this的指向。

var testCall = function(obj, callback){
    callback.call(obj, 1);
}

testCall(["一、改变this的指向", "二、函数内部可以通过this调用"], function(index){ //使用 call方式调用，可以直接通过this访问 call 的第一个参数传入的对象。
alert(this[index]); //二、函数内部可以通过this调用 });

不使用 call方式调用，没有使用this。

var test = function(obj, callback){
    callback(obj, 1);
}

test(["一、改变this的指向", "二、函数内部可以通过this调用"], function(index){ //不使用 call方式调用，没有使用this。
alert(this[index]); //undefined});

jQuery.each 应该就是使用 call 修改 的 this 指向；

$.each([1,2,3], function (index, item) {    console.log({index:index,value:item,_this:this});
});/*
  Object {index: 0, value: 1, _this: Number}
  Object {index: 1, value: 2, _this: Number}
  Object {index: 2, value: 3, _this: Number}
*/

没看 jQuery 源代码，用 callback.call 山寨个，应该实现方式是一样的。

var each = function(arr, callback){
  for( var index = 0 ; index < arr.length ; index++ ){
    callback.call(arr[index], index, arr[index]);
  }
}
each([1,2,3], function (index, item) {
    console.log({index:index,value:item,_this:this});
});/*
  Object {index: 0, value: 1, _this: Number}
  Object {index: 1, value: 2, _this: Number}
  Object {index: 2, value: 3, _this: Number}
*/

注意：this，如果没有 使用 call，在回调函数中是没法使用 this 的。

1.没有args的情况

　　　　一般来说，args是不常用的，所以先不讨论当if(args)成立的情况，也就是直接看在代码中标为灰色的部分，这也是each()函数核心的部分

if(isArray) {
  　　　　for(; i < length; i++) {
  　　　　　　value = callback.call(obj[i], i, obj[i]);
  　　　　　　if(value === false) { break; }
  　　　　}
 　　 }

如果你要遍历的对象，是数组类型，则进入此代码块
　　　for循环遍历数组的每个元素，然后利用call方法，执行obj[i].callback(i,obj[i])，
　　　所以，自己再写回调函数的时候，应该意识到jquery会用数组的每个对象去执行你的回调函数，参数传的是元素在数组中index和该元素，同时回调方法内部的this，也指向该元素；
　　　下一行是判断回调函数是否返回了值，如果回调函数返回false，则跳出该数组的循环。

如果自己传的对象也是可以遍历的，代码和上面数组遍历也是一样的

else {
  　　　　for(i in obj) {
   　　   　　value = callback.call(obj[i], i, obj[i]);
   　　   　　if(value === false) { break; }
   　　   }
　　  }

　如果自己传的是对象，则用for(x in y)遍历对象的属性，
　　　原理和上面一样，只不过换成对象内部的属性x，去执行回调函数，相当于obj.attr.callback(i,obj.attr);
　　　回掉函数中如果返回false，也是会结束循环操作。

2.有args的情况

　　当调用each()有第三个参数的时候，便会进入下面的代码块，来分析下：　

if(isArray) {            
   for(; i < length; i++) {
     value = callback.apply(obj[i], args);                
     if(value === false) { break; }
            }
        } else {            
        for(i in obj) {
          value = callback.apply(obj[i], args);                
          if(value === false) { break; 
          }
        }
  }

同样道理，会先判断你要遍历的对象是否是数组，如果是数组，则遍历数组的元素obj[i]，并执行obj[i].callback(args)
注意！这个地方传的参数是你自己传进来的args数组，这是和没有args参数不一样的地方，也就是说如果你调用each函数是传入了自己的数组参数，回调函数的参数列表就是你所传的args数组。其他的同上。

$(selector).each(callback,args)函数接收2个参数：callback--要遍历执行的回调函数、args--自己指定的数组。　明白了$.each()函数，$(selector).each就简单了，翻开源码，$(selector).each内部就是调用的$.each()函数，源码如下：

each: function( callback, args ) {
  　　  return jQuery.each( this, callback, args );
　　},

　可以看到，在调用$.each()的时候，obj参数是写成了this,也就是$(selector),这是jquery选择器返回一个jquery内部对象。　　

总结：$.each()和$(selector).each()的区别就是前者可以针对所有对象或者数组进行遍历，而后者是针对jquery选择器返回的jquery内部对象进行遍历，前者更强大一些

以上是Jquery的$(selector).each()和$.each()区别实例详解的详细内容。更多信息请关注PHP中文网其他相关文章！