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

Posted 2020-08-14 洞拐洞拐

　　我们都用过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 === 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数组。
　　　　其他的同上。

　　还有大家注意到了没有？有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 === false) { break; }
            }
        } else {
            for(i in obj) {
                value = callback.apply(obj[i], args);
                if(value === 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 === false) { break; }
            }
        } else {
            for(i in obj) {
                value = callback.call(obj[i], i, obj[i]);
                if(value === false) { break; }
            }
        }
    }