脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Javascript - Arraylike的7种实现，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 jQuery的崛起让ArrayLike（类数组）在javascript中大放异彩，它的出现为一组数据的行为（函数）扩展提供了基础。
类数组和数组相似，具有数组的某些行为，但是它相比数组可以更加自由的扩展，它的存在让一组数据的表现不再受限于数组，也无需去污染数组本身的原型——它来自javascript对象的挖掘和扩展，而并非javascript本身就存在的。简单的说，它来自数组，比数组更加适合扩展。
本文原创于linkFly，原文地址。
这篇文章主要分为以下知识
锋芒毕露的ArrayLike
ArrayLike的实现
其他
锋芒毕露的ArrayLike
如果你已经了解了ArrayLike，这一节可以略过。
ArrayLike（类数组/伪数组）即拥有数组的一部分行为，在DOM中早已表现出来，而jquery的崛起让ArrayLike在javascript中大放异彩。正如它的翻译一样：它类似于数组。
ArrayLike对象的精妙在于它和javascript原生的Array类似，但是它是自由构建的，它来自开发者对javascript对象的扩展，也就是说：对于它的原型（PRototyPE）我们可以自由定义，而不会污染到javascript原生的Array。
过去针对一组数据的扩展是下面这个样子的：
//污染Array实现扩展
Array.prototype.demo = function () {
//check
};
test.demo();
上面代码你们懂的，污染了Array，在协同式开发中这简直就是作孽啊——ArrayLike应此诞生。
ArrayLike让你对一组数据的扩展不再受限于Array本身，同时也不会影响到Array，说白了就是：一组数据，肯定是有数组来存，但是如果要对这组数据进行扩展，会影响到数组原型，ArrayLike的出现则提供了一个中间数据桥梁，ArrayLike有数组的特性， 但是对ArrayLike的扩展并不会影响到原生的数组。举个栗子：
爸爸妈妈对你期望很高，你要好好学习，但是舍友基佬教会了你打dota，整天拉你打dota让你没时间看书学习，结果呢，就是打得一手好dota学习掉下去了——但是如果，你开了分身斧，让你的分身去打dota，你自己仍然好好学习，dota学习两不误，而且你的分身不仅仅可以打dota，也可以去打wow，把妹，做你做不到的事情，是不是觉得这样不就碉堡了么！！！
没错，ArrayLike就是要干这么碉堡的事情。
常见的ArrayLike有下面这几个，详见：其他。
StyleSheetList
HTMLCollection
HTMLFormControlsCollection (继承HTMLCollection)
HTMLOptionsCollection(继承HTMLCollection)
HTMLAllCollection
DOMTokenList
ArrayLike的实现
第一种 - 通过闭包实现：
通过闭包实现，内部采用一个Array作为基础，API是针对数组进行操作，在API的实现上较差。并且不支持直接通过索引（array[0]）来访问元素，通过闭包实现上会丢失instanceof的判定，优点是够轻。
!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();
}();
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-Javascript - Arraylike的7种实现全部内容，希望文章能够帮你解决javascript代码实例教程-Javascript - Arraylike的7种实现所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。