为什么可以像数组一样查询 jQuery('div') ？

我还有一个关于 jQuery 架构的问题。$('div')构造一个新的jQuery object:

$('div') instanceof jQuery; // true

我想知道为什么可以像数组一样查询它，尽管它不是数组？

$('div')[0]; // returns the first div in the document as a DOM node.
$.isArray($('div')); // false

我就是喜欢这个语法，它看起来很干净！我还注意到这将 DOM 节点作为数组返回：

console.log($('div'));

有人可以解释一下如何将这种行为应用到我自己的对象上吗？

我自己的方法是使用如下方法创建一个数组：

var a = ['a', 'b', 'c'];
a.method = function(){ return 'test'; };
a; // ['a', 'b', 'c']
a[0]; // 'a'
a.method(); // 'test'

然而这似乎不是 jQuery 的做法，因为这实际上是一个数组：

$.isArray(a); // true

我想知道 jQuery 如何做到这一点，以学习并看看它是否是比我更好的解决方案。

jQuery 对象就是我们所说的Array-like object。这意味着，它确实是一个“真正的”对象（事实上，所有“数组”都是 ECMAscript 中的对象），但它拥有某些属性，使其看起来像“真正的”数组。这些属性是

• it as a .length财产
• 它拥有.splice() method

这两个事实足以让大多数 js 引擎 控制台将该对象解释为数组。

Example:

var myObject = { },
    push = Array.prototype.push;

myObject.aNiceFunction = function() {
    console.log(this);
};

push.call( myObject, document.getElementById('foo') );
push.call( myObject, document.getElementById('bar') );

myObject.splice = Array.prototype.splice;

如果我们现在记录我们的对象

console.log( myObject );

我们得到了典型的 jQuery 结果

[div#foo, div#bar]

看看实际情况

但我们仍然可以调用我们的方法.aNiceFunction()在那个物体上。通过推动新元素Array.prototype.push()方法到我们的对象上，ECMAscript 会自动为我们索引这些元素。这是 jQuery 底层发生的事情的简短描述。

再说一下 ECMAscript 中的“数组”。这种语言中没有真正的数组（如果我们忘记了类型数组一秒钟）。只有Object。如果我们有一个对象继承自Array.prototype我们几乎会称它为数组。我们剩下要做的就是设置.length财产给0.