首页 > web前端 > js教程 > Jquery的$(selector).each()和$.each()区别实例详解

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

伊谢尔伦
发布: 2017-06-16 16:20:45
原创
1272 人浏览过

 我们都用过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中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板