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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Jquery的$(selector).each()和$.each()区别实例详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4109字，纯文字阅读大概需要6分钟。

内容图文

　　翻看一下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()区别实例详解的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的Jquery的$(selector).each()和$.each()区别实例详解全部内容，希望文章能够帮你解决Jquery的$(selector).each()和$.each()区别实例详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端