原文：http://www.imooc.com/code/3248

为什么是类数组对象呢？

很多人迷惑的jQuery为什么能像数组一样操作，通过对象get方法或者直接通过下标0索引就能转成DOM对象。

首先我们看jQuery的入口都是统一的$, 通过传递参数的不同，实现了9种方法的重载：

1. jQuery([selector,[context]])

2. jQuery(element)

3. jQuery(elementArray)

4. jQuery(object)

5. jQuery(jQuery object)

6. jQuery(html,[ownerDocument])

7. jQuery(html,[attributes])

8. jQuery()

9. jQuery(callback)

9种用法整体来说可以分三大块：选择器、dom的处理、dom加载。
换句话说jQuery就是为了获取DOM、操作DOM而存在的！所以为了更方便这些操作，让节点与实例对象通过一个桥梁给关联起来，jQuery内部就采用了一种叫“类数组对象”的方式作为存储结构，所以我们即可以像对象一样处理jQuery操作，也能像数组一样可以使用push、pop、shift、unshift、sort、each、map等类数组的方法操作jQuery对象了。

jQuery对象可用数组下标索引是什么原理？

通过$(".Class")构建的对象结构如下所示：


                   
整个结构很明了，通过对象键值对的关系保存着属性，原型保存着方法。我们来简单的模拟一个这样的数据结构：见下面的代码

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script>

<style type="text/css">

    div{

        width: 30px;

        height: 10px;

        float:left;

    }

</style>

<title>无标题文档</title>

</head>

<body>

<button id="test1">jQuey[0]</button>

<button id="test2">jQuey.get</button>

<button id="test3">aQuery[0]</button>

<button id="test4">aQuery.get</button>

<p id="book">book</p>

<div id="show1"></div>

<div id="show2"></div>

<div id="show3"></div>

<div id="show4"></div>

<script type="text/javascript">

var aQuery = function(selector) {

    //强制为对象

    if (!(this instanceof aQuery)) {

        return new aQuery(selector);

    }

    var elem = document.getElementById(/[^#].*/.exec(selector)[0]);

    this.length = 1;

    this[0] = elem;

    this.context = document;

    this.selector = selector;

    this.get = function(num) {

        return this[num];

    }

    return this;

}

//结果是一个dom元素,可以把代码放到Google Chrome下运行

//按F12通过调试命令 console.log() 打印出对象

$("#test1").click(function() {

    $('#show1').append($('#book')[0])

})

$("#test2").click(function() {

    $('#show2').append($('#book').get(0))

})

$("#test3").click(function() {

    $('#show3').append(aQuery("#book")[0])

})

$("#test4").click(function() {

    $('#show4').append(aQuery("#book").get(0))

})

</script>

</body>

</html>

以上是模拟jQuery的对象结构，通过aQuery方法抽象出了对象创建的具体过程，这也是软件工程领域中的广为人知的设计模式-工厂方法。

jQuery的无new构建原理

函数aQuery()内部首先保证了必须是通过new操作符构建。这样就能保证当前构建的是一个带有this的实例对象，既然是对象我们可以把所有的属性与方法作为对象的key与value的方式给映射到this上，所以如上结构就可以模拟出jQuery的这样的操作了，即可通过索引取值，也可以链式方法取值，但是这样的结构是有很大的缺陷的，每次调用ajQuery方法等于是创建了一个新的实例，那么类似get方法就要在每一个实例上重新创建一遍，性能就大打折扣，所以jQuery在结构上的优化不仅仅只是我们看到的，除了实现类数组结构、方法的原型共享，而且还实现方法的静态与实例的共存，这是我们之后将会重点分析的。

jQuery的类数组对象结构（转）的更多相关文章

  1. jQuery的类数组对象结构

    Query就是为了获取DOM.操作DOM而存在的 所以为了更方便这些操作,让节点与实例对象通过一个桥梁给关联起来,jQuery内部就采用了一种叫"类数组对象"的方式作为存储结构,所 ...

  2. 如何在JavaScript中手动创建类数组对象

    前言 关于什么是js的类数组对象这里不再赘述.可以参考这个链接,还有这里. js中类数组对象很多,概念简单的讲就是看上去像数组,又不是数组,可以使用数字下标方式访问又没有数组方法. 例: argume ...

  3. [Effective JavaScript 笔记]第58条：区分数组对象和类数组对象

    示例 设想有两个不同类的API.第一个是位向量:有序的位集合 var bits=new BitVector(); bits.enable(4); bits.enable([1,3,8,17]); bi ...

  4. 将类数组对象(array-like object)转化为数组对象(Array object)

    用法:Array.prototype.slice.call(array-like object) // 创建一个类数组对象 var alo = {0:"a", 1:"b& ...

  5. 浅谈JavaScript和DOM中的类数组对象

    JavaScript是一门弱类型语言,它的数据类型分为两大类:简单数据类型(5种:Undefined.Null.Boolean.Number.String)和复杂数据类型(1种:Object).Obj ...

  6. JQUERY-事件-动画-类数组对象-添加自定义API

    正课: 1. 事件: 2. 动画: 3. 类数组对象操作: 4. 添加自定义API: 1. 事件: 1. 页面加载后执行: 2个时机 1. DOM内容加载完成: 仅包括html, js DOMCont ...

  7. JS中集合对象(Array、Map、Set)及类数组对象的使用与对比

    原文地址 在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java中泛型强制要求指定类型. ES6引入了iterable类型, ...

  8. js－ 类数组对象

    JavaScript中,数组是一个特殊的对象,其property名为正整数,且其length属性会随着数组成员的增减而发生变化,同时又从Array构造函数中继承了一些用于进行数组操作的方法. 而对于一 ...

  9. Javascript数组与类数组对象

    问题来由: 之前面试X公司的时候,问我关于原型链知道多少,于是我就开始说了一些有关于原型链的东西,面试官问Array的原型是什么,我说是对象,毕竟Array.prototype===array.__p ...

随机推荐

  1. POJ 2502 Subway / NBUT 1440 Subway / SCU 2186 Subway（图论，最短距离）

    POJ 2502 Subway / NBUT 1440 Subway / SCU 2186 Subway(图论,最短距离) Description You have just moved from a ...

  2. 【LOJ#10131】暗的锁链

    题目大意:给定一个 N 个点无向图的一棵生成树和另外 M 条边,第一次去掉生成树中的一条边,第二次去掉另外 M 条边中的一条边,求有多少种情况可以使得给定的无向图不连通. 题解:首先考虑该生成树,若新 ...

  3. 【codevs1065】01字符串

    题目大意:输出仅由 0 和 1 组成的长度为 N 的字符串个数,并且其中不能含有 3 个连续的相同子串. 题解:数据太水,正规解法应该是枚举后缀进行判断. 代码如下 #include <bits ...

  4. c++并发编程之线程的互斥与同步

    什么是线程的同步与互斥? 互斥:指在某一时刻指允许一个进程运行其中的程序片,具有排他性和唯一性. 对于线程A和线程B来讲,在同一时刻,只允许一个线程对临界资源进行操作,即当A进入临界区对资源操作时,B ...

  5. phpstorm 配置 webpack @ 别名跳转

    webstorm中专门有webpack的相关配置,默认的路径直接是项目根目录下的 webpack.config.js,但是我们用各种cli生成的项目中,webpack的配置一般都是在build下,导致 ...

  6. SQL Server 事务与隔离级别实例讲解

    上班途中,你在一处ATM机前停了下来.正当你在敲入密码的时候,你的一位家人也正在镇上的另一处TAM机上输入密码.你打算从某个还有500元余额的账户上转出400元,而你的家人想从同一账户取走300元.倘 ...

  7. 《Linux命令行与shell脚本编程大全》23章24章

    第二十三章 使用其他shell bash shell是linux发行版中最广泛使用的shell.但是它并不是唯一的选择,还有其他的shell可以供你选择. 23.1 什么是dash shell 百度百 ...

  8. 20155206 2016-2017-2 《Java程序设计》第7周学习总结

    20155206 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 认识时间与日期 1.格林威治时间(GMT):通过观察太阳而得,因为地球公转轨道为椭圆形且速度 ...

  9. [R语言]关联规则2---考虑items之间严格的时序关系

    前面介绍了关联规则1---不考虑用户购买的items之间的时序关系,但在一些情况下用户购买item是有严格的次序关系了,比如在某些休闲游戏中,用户购买了道具A才能购买道具B,且道具A和B只能购买一次, ...

  10. sql server查询某年某月有多少天

    sql语句如下: ),) date from (),,)+'-01' day) t1, ( ) t2 ),) ),,)+'%' 查询结果如下: 2017年2月共有28天,查询出28条记录.