jQuery源码分析-each函数

jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理,在jQuery使用的频率非常大，下面就这个函数做了详细讲解：

 

代码

/* !   
 * jQuery源码分析-each函数  
 * jQuery版本:1.4.2  
 *  
 * ----------------------------------------------------------  
 * 函数介绍  
 *  
 * each函数通过jQuery.extend函数附加到jQuery对象中：  
 * jQuery.extend({  
 *     each: function() {}  
 * });  
 * 如果对jQuery.extend函数源码还不了解,可以参考《jQuery源码分析-extend函数》一文  
 *  
 * jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理  
 * jQuery.each方法可以为处理函数增加附带的参数(带参数与不带参数的回调使用方法不完全一致)  
 *  
 * ----------------------------------------------------------  
 * 使用说明  
 * each函数根据参数的类型实现的效果不完全一致：  
 * 1、遍历对象(有附加参数)  
 * $.each(Object, function(p1, p2) {  
 *     this;      //这里的this指向每次遍历中Object的当前属性值  
 *     p1; p2;    //访问附加参数  
 * }, ['参数1', '参数2']);  
 *  
 * 2、遍历数组(有附件参数)  
 * $.each(Array, function(p1, p2){  
 *     this;      //这里的this指向每次遍历中Array的当前元素  
 *     p1; p2;    //访问附加参数  
 * }, ['参数1', '参数2']);  
 *  
 * 3、遍历对象(没有附加参数)  
 * $.each(Object, function(name, value) {  
 *     this;     //this指向当前属性的值  
 *     name;     //name表示Object当前属性的名称  
 *     value;    //value表示Object当前属性的值  
 * });  
 *  
 * 4、遍历数组(没有附加参数)  
 * $.each(Array, function(i, value) {  
 *     this;     //this指向当前元素  
 *     i;        //i表示Array当前下标  
 *     value;    //value表示Array当前元素  
 * });  
 * ----------------------------------------------------------  
 *  
  */   
// jQuery.each(), $.each()   
// @param {Object}|{Array} object 需要遍历处理的对象或数组   
// @param {Function} callback 遍历处理回调函数   
// @param {Array} args callback回调函数的附加参数   
each:  function (object, callback, args){   
  
     // 当需要遍历的是一个对象时,name变量用于记录对象的属性名   
     var  name,       
       
     // 当需要遍历的是一个数组时,i变量用于记录循环的数组下标   
    i  =   0 ,       
       
     // 遍历数组长度,当需要遍历的对象是一个数组时存储数组长度   
     // 如果需要遍历的是一个对象,则length === undefined   
    length  =  object.length,       
       
     // 检查第1个参数object是否是一个对象   
     // 根据object.length排除数组类型，根据isFunction排除函数类型(因为函数也是对象)   
    isObj  =  length  ===  undefined  ||  jQuery.isFunction(object);   
       
     // 回调函数具有附加参数时,执行第一个分支   
     // if(!!args) {   
     if  (args) {   
           
         // 需要遍历的是一个对象   
         if  (isObj) {   
               
             // 遍历对象属性,name是对象的属性名,再函数顶部已声明   
             // 许多人不太习惯for(var name in object)方式,如果不进行声明,则name就会被定义为全局变量   
             for  (name  in  object) {   
               
                 // 调用callback回调函数,且回调函数的作用域表示为当前属性的值   
                 // 如:callback() {  this; //函数中的this指向当前属性值   
                 // 将each的第3个参数args作为回调函数的附加参数   
                 if  (callback.apply(object[name], args)  ===   false ) {   
                   
                     // 如果在callback回调函数中使用return false;则不执行下一次循环   
                     break ;   
                }   
            }   
        }   
         // 需要遍历的是一个数组   
         else  {   
           
             // 循环长度,循环变量i在函数顶部已定义   
             // 循环变量的自增在循环内部执行   
             for  (; i  <  length;) {   
               
                 // 调用callback函数,与上面注释的callback调用一致   
                 // 此处callback函数中的this指向当前数组元素   
                 if  (callback.apply(object[i ++ ], args)  ===   false ) {   
                     break ;   
                }   
            }   
        }   
           
    }   
     // 回调函数没有附加参数时,执行第二个分支   
     else  {   
       
         // 需要遍历的是一个对象   
         if  (isObj) {   
           
             // 循环对象的属性名,name在函数顶部已定义   
             for  (name  in  object) {   
               
                 // 调用callback回调函数   
                 // 在不带参数的对象遍历中,作用域表示为当前属性的值   
                 // 且回调函数包含两个参数,第一个数当前属性名,第二个是当前属性值   
                 // 我觉得这句代码修改一下会更好用：if(callback.call(object, name, object[name]) === false) {   
                 if  (callback.call(object[name], name, object[name])  ===   false ) {   
                   
                     // 如果在callback回调函数中使用return false;则不执行下一次循环   
                     break ;   
                }   
            }   
        }   
         // 需要遍历的是一个数组   
         else  {   
             // 这里的for写法有点BT,解释为：   
             // var value = object[0];   
             // for(; i < length;) {   
             //     if(false === callback.call(value, i, value)) {   
             //         break;   
             //     }   
             //     value = object[++i];   
             // }   
             // 同样,我觉得这里的代码稍加修改会更好用:   
             // for (; i < length && false !== callback.call(object, i, object[i++]);) {   
             // }   
             for  ( var  value  =  object[ 0 ]; i  <  length  &&  callback.call(value, i, value)  !==   false ; value  =  object[ ++ i]) {   
            }   
        }   
    }   
       
     // 这里返回遍历的对象或数组,但object没有被更改,因此一般不给$.each()赋值   
     // 但是如果按照我在注释中所修改的写法来使用,且在callback回调函数中对this(即对object的引用)进行了修改   
     // 则这里返回的object是被修改后的对象或数组   
     return  object;   
}