Jquery源码分析---jQuery类数组的分析

Jquery源码分析---jQuery类数组的分析2010-12-15prk（彭仁夔）4.1、类数组构建

从上节可以看出jquery构建函数完成了查找或转换或其它的功能，其结果就是查找到元素。Dom树查找，html转换成Dom元素，还是直接传入Dom元素都不过是方式而已。找到这些元素就得找个地方去存储起来。

存储有序数据的地方（集合）在JS中最好的当然是数组。那么又如何在 jQuery内面实现数组呢？可以采用如下的方式：

jQuery.fn.prototype=new Array（）;

在上一节中的this.setArray（arr）函数中加上

Array.apply （this,arr）;

如果还要完美一点，就加上：

jQuery.fn.prototype.constructor=jQuery。

这样我们继承了数组的所有特性，又可以在Jquery对象进行数组的功能扩展。但是 jQuery并没有这样采用继承Array而实现这个内部的集合。它采用了Array-Like 的对象的实现（见JavaScript: The Definitive Guide, 5th Edition7.8节）。

类数组的对象还是对象，只不过像数组。数组与对象其实是没有什么好大的区别的，有序和无序的集合是它们区别。这个区别反应在数组有的length属性。当添加元素它会自动加上相对的个数，当删除元素，它会自动减去相对的个数。

看一下jQuery是怎么实现的：

// 第一种情况 Handle $（DOMElement）单个Dom 元素，忽略上下文
    if （selector.nodeType） {                      ②
      this[0] = selector;
      this.length = 1;
      return this;
    }

这是它的第一种实现方法，通过this[0]来直接设定第一个位置的Dom元素，同时设定length=1。这里我们可以看出对象与数组一样都是采用key/Value对的形式存在对象中。上面的Json形式为{0：aDom,length=1}。这里细细分析一下数组，数组是继承于对象。其[]的解释分析最终结果可以看作{}构的对象，对[]或数组的构建时会进行把 index（如0.1,….）做为对象属性的key。把数组中的值做为其对应的value 。同时改变length的值。这也就是说为什么本质上对象与数组没有多大的区别。在很多的源码中，如YUI中都采用对象的形式来构建多维数组。

this.setArray（jQuery.makeArray（selector））;

是其第二种实现的方法，上面实现是单个的元素，这个实现的多个元素的集合。它首先调用了jQuery.makeArray（selector）这个静态方法把集合（类数组）转换成数组。

上面已经分析了数组和对象都可以采用obj.[attr]的形式来取得其key对应的value。对于集合或类数组，必须要求其实现length属性，有了 length的长度，那么就从0~length-1的key属性中取得对应的value就可以了：

//把类数组的集合转换成数组，如果是单个元素就生成单个元素 的数组。
makeArray: function（ array ） {
  var ret = [];
  if（ array ！= null ）{ var i = array.length;
  //单个元素， 但window, string、 function有 "length"的属性，加其它的判断
   if（ i == null || array.split || array.setInterval || array.call ）
     ret[0] = array;
   else//类数组的 集合
     while（ i ）  ret[--i] = array[i];//Clone数组
   }
return ret;
  },

生成了一个标准的数组，那么接下来setArray来干什么呢？

// 把array-like对象的元素 全部push当前jquery对象。
  setArray : function（elems） {
     this.length = 0;//初始化长度，因为push会在原始的length++
     Array.prototype.push.apply（this, elems）;
    return this;
  },