为什么可以像数组一样查询jQuery（'div'）？ [英] Why is it possible to query jQuery('div') like an array?
问题描述
我还有一个关于jQuery架构的问题。 $（'div'）构造一个新的 jQuery 对象：
I got another question regarding jQuery's architecture. $('div') constructs a new jQuery object:
$('div') instanceof jQuery; // true
我想知道为什么可以像数组一样查询它，尽管如此它不是数组？
I'd like to know why it is possible to query it like an array, allthough it isn't an array?
$('div')[0]; // returns the first div in the document as a DOM node.
$.isArray($('div')); // false
我喜欢这种语法，看起来很干净！我还注意到这会将DOM节点作为数组返回：
I just love this syntax, it looks so clean! I also noticed this returns the DOM nodes as an array:
console.log($('div'));
有人可以解释一下如何对我自己的对象实现这种行为吗？
Can somebody explain me how to implement this behaviour to my own objects?
我自己的方法是用这样的方法制作一个数组：
My own approach was to make an array with some methods like this:
var a = ['a', 'b', 'c'];
a.method = function(){ return 'test'; };
a; // ['a', 'b', 'c']
a[0]; // 'a'
a.method(); // 'test'
然而这似乎不是jQuery的方式，因为这是实际上是一个数组：
However this doesn't seem to be the way jQuery does it as this is actually an array:
$.isArray(a); // true
我想知道jQuery如何学习这个并看看它是不是比我更好的解决方案。
I'd like to know how jQuery does this to learn and to see if it's a better solution than mine.
推荐答案
jQuery对象就是我们所说的类似数组的对象。这意味着，它确实是一个真正的对象（事实上，所有数组都是ECMAscript中的对象），但它拥有某些属性，使其看起来像一个真正的数组。这些属性是
A jQuery object is what we call a Array-like object. That means, it indeed is a "true" object (infact, all "arrays" are objects in ECMAscript), but it owns certain properties which make it look like a "true" array. Those properties are
- 它作为
.length属性 - 它拥有
.splice（）方法
- it as a
.lengthproperty - it owns the
.splice()method
那些两个事实就足够了，大多数 js引擎控制台会将该对象解释为数组。
those two facts are enough that most js engines consoles will interpretate that object as array.
示例：
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;
如果我们现在记录我们的对象
If we now log our object
console.log( myObject );
我们得到典型的jQuery'ish结果
we get the typical jQuery'ish result
[div#foo, div#bar]
< a href =http://jsfiddle.net/PEwta/1/ =nofollow>查看实际情况
但我们仍然能够在该对象上调用我们的方法 .aNiceFunction（）。通过将 Array.prototype.push（）方法的新元素推送到我们的对象上，ECMAscript将自动为我们索引这些元素。这简短描述了jQuery引擎盖下发生的事情。
but we are still able to call our method .aNiceFunction() on that object. By pushing new elements with the Array.prototype.push() method onto our object, ECMAscript will automatically index those elements for us. That was short description what happens under the jQuery hood.
ECMAscript中有关数组的更多信息。这种语言中没有真正的数组（如果我们忘记键入的数组一秒钟）。只有对象。如果我们有一个继承自 Array.prototype 的对象，我们几乎将它称为数组。我们剩下要做的就是将 .length 属性设置为 0 。
One more word about "Arrays" in ECMAscript. There are no real arrays in this language (if we forget about typed arrays for a second). There is only Object. If we have an object that inherits from Array.prototype we would almost call it an array. Everything we would have left to do is, set the .length property to 0.
这篇关于为什么可以像数组一样查询jQuery（'div'）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
