原文：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方法抽象出了對象創建的具體過程，這也是軟件工程領域中的廣為人知的設計模式-工廠方法。
函數aQuery()內部首先保證了必須是通過new操作符構建。這樣就能保證當前構建的是一個帶有this的實例對象，既然是對象我們可以把所有的屬性與方法作為對象的key與value的方式給映射到this上，所以如上結構就可以模擬出jQuery的這樣的操作了，即可通過索引取值，也可以鏈式方法取值，但是這樣的結構是有很大的缺陷的，每次調用ajQuery方法等於是創建了一個新的實例，那么類似get方法就要在每一個實例上重新創建一遍，性能就大打折扣，所以jQuery在結構上的優化不僅僅只是我們看到的，除了實現類數組結構、方法的原型共享，而且還實現方法的靜態與實例的共存，這是我們之后將會重點分析的。