简述JavaScript对象、数组对象与类数组对象

问题引出



在上图给出的文档中，用JavaScript获取那个a标签，要用什么办法呢？相信第一反应一定是使用document.getElementsByTagName('a')[0]来获取。同样的，在使用getElementsByName等DOM遍历方法中，我们也习惯性会去使用数组方法来进行操作，如数字索引、用length属性访问长度并遍历等等。久而久之，很多人都一直认为DOM遍历方法返回的是一个数组。  实际上。。。。。。


返回了一个HTMLCollection对象

假如我们用一个数组来表示：


  返回的当然是一个数组对象了哈哈哈哈哈

上面两个运行环境截图给萌新们展示了，DOM遍历方法返回的不是数组对象，而是一个HTMLCollection对象，下面来说说这种特别像数组却又不是数组的对象：

JavaScript对象

JavaScript是一个基于对象的语言，正所谓万物皆是对象。JavaScript对对象的定义是：属性的无序集合，每个属性存放一个原始值、对象或函数。这句话可以通俗理解为，每个对象就是一个键值对的集合，键即是属性名，而值就是属性值，可以是原始值、对象或者函数。


这里用字面量的方法定义了一个对象

而访问对象的属性有以下两种办法：

        用‘.’来访问，直接用 对象.属性名 的方法来获取
        用[]来访问：对象[属性名]



数组对象

而数组对象，则是一个特殊的对象，可以看作是键名（属性名）只能是数字（注意是绝对意义上的数字，而不是内容为数字的字符串）、并且只能从0开始顺次递增1的整数的对象。数组对象继承了对象的方法与特性，同时在自己这一层又定义了很多自己的方法，比如push()、shift()等等，这就构建了我们平时所使用的数组。



从上可以看到一个数组，除了所存储的键值对属性外，还具有length和__proto__两个属性，length不用多说，而__proto__指向该对象所继承的元素，可以理解为指向父类。  这里可以看到一个普通的数组对象继承自Array[0]，在Array[0]中定义了数组的各种方法，而Array[0]则继承自Object.

类数组对象及转换

这里再来说我们的类数组对象，相信就容易理解多了。 类数组对象是JavaScript中一类特殊的对象，他们也继承自Object对象，具有length属性，可以使用[]进行访问（这样也就可以使用for进行循环遍历）、并且键是自然数序列。但是他们并不继承自Array对象，也就不具有数组对象的种种方法了~



而JavaScript中的类数组对象并不只有HTMLCollection一个，另外常用的还有Arguments（函数的参数列表）、NodeList（节点列表）、StyleSheetList（样式列表）等等，这里就不详细介绍了，大家可以自己试试他们各自的使用方法、属性与方法。除了JavaScript内置的一些类数组对象之外，我们也可以自己来构建、甚至定义类数组对象来使用，比如

甚至 

。。。。。。

另外一个要提是类数组对象向数组对象的转换。虽然我现在还没有遇到过需要做如此转换的情景，不过还是介绍下这个方法。除了“用for循环遍历访问类数组对象中的元素并装入另外定义的一个数组”这样的方法外，博客大神们还提供了另外一个方法，如下：



这里使用了call方法，本菜鸟目前对JS继承链上Function这个分支还没怎么深入研究，不太懂这个方法。留作以后解释吧。。。。。。