2.5 jQuery类数组_jQuery从入门到精通（微课精编版）-QQ阅读男生武侠网

上QQ阅读APP看书，第一时间看更新

2.5　jQuery类数组

在jQuery库中，有两个概念特别需要初学者注意：一个是jQuery类对象，另一个是jQuery对象，jQuery库中所有功能函数都挂在这两个对象上，而且大部分方法是一一对应的。

2.5.1　jQuery对象

无论在何种情况下，调用jQuery()构造函数都将返回一个jQuery对象。注意，下面方法除外：

     $(function(){});

jQuery对象是jQuery()构造函数返回的this，这个this指代jQuery.prototype，即jQuery原型对象。实际上，这个this应该是init()初始化处理函数的构造实例：

     jQuery = function (selector, context) {
         //这里使用jQuery.fn.init()构造了一个jQuery对象
         return new jQuery.fn.init(selector, context);
     }

然后，jQuery通过下面一行代码，使用jQuery.prototype覆盖掉init.prototype，让init()构造函数的实例继承jQuery的原型。

     init.prototype = jQuery.fn;

其中jQuery.fn引用jQuery.prototype。

在jQuery.fn.init函数中，最终把匹配的DOM元素以类数组的形式挂在jQuery对象上，形成一个类数组形式。

2.5.2　构建类数组

类数组（Array-Like）是jQuery框架核心概念，它描述了jQuery对象的基本形态：jQuery选择器能够匹配一个或多个DOM元素，并把这些元素打包到一个数据集合中返回，然后提供众多操作这个数据集合的方法。

如果从数据结构角度分析，对象和数组其实都是数据集合，只不过对象是一个无序集合，数组是一个有序集合。

对于数组来说，它有两个主要特征：自带有序排列的下标值，包含一个length属性，当数组元素增减时，length属性值会自动更新，反映变化后数组的实际长度。

在JavaScript中，存储有序数据最好的结构当然是数组。jQuery实现元素存储最高效的方法也应该采用如下方式：

     jQuery.fn.prototype=new Array();

在this.setArray(arr)函数中添加如下代码：

     setArray.apply(this,arr);

这样就继承了数组的所有特性，并可以在jQuery对象中进行数组的功能扩展。但是jQuery并没有这样来实现对匹配元素的打包，它采用了Array-Like对象来实现。

类数组实际上就是对象，但是它附加有序数据寄存功能，结构类似数组。为了模拟Array有序的数据存储结构，jQuery采用人工方式增加length属性，并随时手动更新length属性值，以确保其值能够准确反映寄存数据的长度，同时使用如下有序名称设置属性值。

可以通过这种类似数组的结构，来设计有序数据寄存的功能。例如，jQuery按如下方式实现数组结构的特性。

     //处理单个DOM元素，$(DOMElement)
     if (selector.nodeType) {
         this[0] = selector;
         this.length = 1;
         return this;
     }

通过this[0]直接设定第1个位置的DOM元素，同时设定length=1。这里可以看出对象与数组一样都是采用key/Value对的形式保存数据。上面的JSON格式如下：

     {
         0 : 1,
         length : 1
     }

对于数组来说，使用[]运算符解析的结果与{}结构是一一对应的。使用[]运算符构建数组时，把index作为对象的属性名，如0、1、2等，即key；把数组中的值作为对象中对应的value；同时手动改变length属性值。因此，从数据结构上分析对象与数组没有太大的区别。在很多框架中，如YUI，都是采用对象的形式来构建类数组的结构。

数组和对象都可以采用obj[attr]的语法形式来取得其key对应的value。对于类数组，必须要求其实现length属性，有了length长度，就可以使用循环语句实现迭代，逐一读取从0到length -1的key对应的value。