首页 > 代码库 > Jquery的$(selector).each()和$.each()原理和区别

Jquery的$(selector).each()和$.each()原理和区别

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

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

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

 

  1.没有args的情况

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

   if(isArray) {      for(; i < length; i++) {        value = callback.call(obj[i], i, obj[i]);        if(value =http://www.mamicode.com/== 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 =http://www.mamicode.com/== 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 =http://www.mamicode.com/== false) { break; }            }        } else {            for(i in obj) {                value = callback.apply(obj[i], args);                if(value =http://www.mamicode.com/== false) { break; }            }        }
    同样道理,会先判断你要遍历的对象是否是数组,如果是数组,则遍历数组的元素obj[i],并执行obj[i].callback(args)
    注意!这个地方传的参数是你自己传进来的args数组,这是和没有args参数不一样的地方,也就是说如果你调用each函数是传入了自己的数组参数,回调函数的参数列表就是你所传的args数组。
    其他的同上。
  还有大家注意到了没有?有args和没有args的区别就是一个用了apply(),而另一个用了call(),这儿简单记一下他俩的区别:  Apply():While the syntax of this function is almost identical to that of call(), the fundamental difference is that call() accepts anargument list,while apply() accepts a single array of arguments. --引自MDN  翻译一下就是:虽然这个apply()和call()句法几乎一致,但是有一个重要的区别就是call()函数是接受多个参数,而apply()仅仅接受一个数组对象。

  $(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中$.each()的源码
 each: function(obj, callback, args) { var value,i = 0, length = obj.length, isArray = isArraylike(obj); if(args) { if(isArray) { for(; i < length; i++) { value = callback.apply(obj[i], args); if(value =http://www.mamicode.com/== false) { break; } } } else { for(i in obj) { value = callback.apply(obj[i], args); if(value =http://www.mamicode.com/== false) { break; } } } // A special, fast, case for the most common use of each } else { if(isArray) { for(; i < length; i++) { value = callback.call(obj[i], i, obj[i]); if(value =http://www.mamicode.com/== false) { break; } } } else { for(i in obj) { value = callback.call(obj[i], i, obj[i]); if(value =http://www.mamicode.com/== false) { break; } } } }

 

Jquery的$(selector).each()和$.each()原理和区别