jQuery的崛起让ArrayLike（类数组）在javascript中大放异彩，它的出现为一组数据的行为（函数）扩展提供了基础。
类数组和数组相似，具有数组的某些行为，但是它相比数组可以更加自由的扩展，它的存在让一组数据的表现不再受限于数组，也无需去污染数组本身的原型——它来自javascript对象的挖掘和扩展，而并非javascript本身就存在的。简单的说，它来自数组，比数组更加适合扩展。
这篇文章主要分为以下知识
- 锋芒毕露的ArrayLike
- ArrayLike的实现
- 其他
锋芒毕露的ArrayLike
如果你已经了解了ArrayLike，这一节可以略过。
ArrayLike（类数组/伪数组）即拥有数组的一部分行为，在DOM中早已表现出来，而jQuery的崛起让ArrayLike在javascript中大放异彩。正如它的翻译一样：它类似于数组。
ArrayLike对象的精妙在于它和javascript原生的Array类似，但是它是自由构建的，它来自开发者对javascript对象的扩展，也就是说：对于它的原型（prototype）我们可以自由定义，而不会污染到javascript原生的Array。
过去针对一组数据的扩展是下面这个样子的：
|
1 2 3 4 5 6 |
//污染Array实现扩展 Array.prototype.demo = function () { //check }; var test = []; test.demo(); |
上面代码你们懂的，污染了Array，在协同式开发中这简直就是作孽啊——ArrayLike应此诞生。
ArrayLike让你对一组数据的扩展不再受限于Array本身，同时也不会影响到Array，说白了就是：一组数据，肯定是有数组来存，但是如果要对这组数据进行扩展，会影响到数组原型，ArrayLike的出现则提供了一个中间数据桥梁，ArrayLike有数组的特性， 但是对ArrayLike的扩展并不会影响到原生的数组。举个栗子：
爸爸妈妈对你期望很高，你要好好学习，但是舍友基佬教会了你打dota，整天拉你打dota让你没时间看书学习，结果呢，就是打得一手好dota学习掉下去了——但是如果，你开了分身斧，让你的分身去打dota，你自己仍然好好学习，dota学习两不误，而且你的分身不仅仅可以打dota，也可以去打wow，把妹，做你做不到的事情，是不是觉得这样不就碉堡了么！！！
没错，ArrayLike就是要干这么碉堡的事情。
常见的ArrayLike有下面这几个，详见：其他。
- Arguments
- NodeList
- StyleSheetList
- HTMLCollection
- HTMLFormControlsCollection (继承HTMLCollection)
- HTMLOptionsCollection(继承HTMLCollection)
- HTMLAllCollection
- DOMTokenList
ArrayLike的实现
第一种 – 通过闭包实现：
通过闭包实现，内部采用一个Array作为基础，API是针对数组进行操作，在API的实现上较差。并且不支持直接通过索引（array[0]）来访问元素，通过闭包实现上会丢失instanceof的判定，优点是够轻。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
!function () { //通过闭包实现 var List = function () { var list = [], self = { constructor: List, //如果希望更像原生一点，将length定义为属性，那么length则需要自己维护 length: function () { return list.length; }, add: function (item) { list.push(item); }, eq: function (index) { return list[index]; } }; return self; }; //测试 console.group('第一种 - 通过闭包实现'); var demo = new List(); demo.add('List - add()'); console.log('demo instanceof List ： %c' + (demo instanceof List), 'color:red;'); console.log('demo.constructor === List ：%c' + (demo.constructor === List), 'color:blue'); //无法通过索引demo[0]这种方式访问 console.log('成员：[ ' + demo.eq(0) + ' , ' + demo.eq(1) + ' ]'); console.log('length：' + demo.length()); //注意看demo对象 console.log(demo); console.groupEnd(); }(); |
运行结果和demo对象结构：
第二种 – 通过继承实现：
主要亮点（应用）在保留Array的API，在Array上二次封装，可以通过索引来访问。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
!function () { //通过继承数组实现，数组原生方法会被继承过来 var List = function () { }; List.prototype = []; List.prototype.constructor = List; List.prototype.add = function (item) { this.push(item); }; //测试 console.group('第二种 - 通过继承实现'); var demo = new List(); λ污染数组本身的原型——它来自javascript对象的挖掘和扩展，而并非javascript本身就存在的。简单的说，它来自数组，比数组更加适合扩展。
这篇文章主要分为以下知识
锋芒毕露的ArrayLike如果你已经了解了ArrayLike，这一节可以略过。 ArrayLike（类数组/伪数组）即拥有数组的一部分行为，在DOM中早已表现出来，而jQuery的崛起让ArrayLike在javascript中大放异彩。正如它的翻译一样：它类似于数组。 ArrayLike对象的精妙在于它和javascript原生的Array类似，但是它是自由构建的，它来自开发者对javascript对象的扩展，也就是说：对于它的原型（prototype）我们可以自由定义，而不会污染到javascript原生的Array。 过去针对一组数据的扩展是下面这个样子的：
上面代码你们懂的，污染了Array，在协同式开发中这简直就是作孽啊——ArrayLike应此诞生。 ArrayLike让你对一组数据的扩展不再受限于Array本身，同时也不会影响到Array，说白了就是：一组数据，肯定是有数组来存，但是如果要对这组数据进行扩展，会影响到数组原型，ArrayLike的出现则提供了一个中间数据桥梁，ArrayLike有数组的特性， 但是对ArrayLike的扩展并不会影响到原生的数组。举个栗子： 爸爸妈妈对你期望很高，你要好好学习，但是舍友基佬教会了你打dota，整天拉你打dota让你没时间看书学习，结果呢，就是打得一手好dota学习掉下去了——但是如果，你开了分身斧，让你的分身去打dota，你自己仍然好好学习，dota学习两不误，而且你的分身不仅仅可以打dota，也可以去打wow，把妹，做你做不到的事情，是不是觉得这样不就碉堡了么！！！ 没错，ArrayLike就是要干这么碉堡的事情。 常见的ArrayLike有下面这几个，详见：其他。
ArrayLike的实现第一种 – 通过闭包实现：通过闭包实现，内部采用一个Array作为基础，API是针对数组进行操作，在API的实现上较差。并且不支持直接通过索引（array[0]）来访问元素，通过闭包实现上会丢失instanceof的判定，优点是够轻。
运行结果和demo对象结构：
第二种 – 通过继承实现：主要亮点（应用）在保留Array的API，在Array上二次封装，可以通过索引来访问。
|
