数组像JavaScript对象 [英] Array Like Objects in Javascript

问题描述

我想知道的jQuery如何构建它的阵列状物体。我试图找出最关键的事情是如何设法得到控制台间preT它作为一个数组，并显示它是这样。我知道它是与length属性，但打了一下后，我不能完全弄清楚。

I'm wondering how jQuery constructs its array-like object. The key thing I'm trying to work out is how it manages to get the console to interpret it as an array and display it as such. I know it has something to do with the length property, but after playing a bit I can't quite figure it out.

我知道这已超过正常的阵列状物体没有技术优势，如下面的例子。但我认为这是一个重要的语义元素时用户测试和调试。

I know this has no technical advantage over a normal array like object as in the example below. But I think it's an important semantic element when users are testing and debugging.

一个普通阵列状物体。

function foo(){
    // Array like objects have a length property and it's properties use integer
    // based sequential key names, e.g. 0,1,2,3,4,5,6 just like an array.
    this.length = 1;
    this[0] = 'hello'
}
// Just to make sure add the length property to the prototype to match the Array 
// prototype
foo.prototype.length = 0;

// Give the Array like object an Array method to test that it works     
foo.prototype.push = Array.prototype.push

// Create an Array like object 
var bar = new foo;

//test it 
bar.push('world');

console.log(bar);
// outputs 
{ 0: 'hello',
  1: 'world',
  length: 2,
  __proto__: foo
}

在哪里为jQuery的将输出

Where as jQuery would output

var jQArray = $('div')

console.log(jQArray);

// outputs
[<div></div>,<div></div>,<div></div>,<div></div>]

如果您运行

console.dir(jQArray)

// Outputs

{ 0: HTMLDivElement,
  1: HTMLDivElement,
  2: HTMLDivElement,
  3: HTMLDivElement,
  4: HTMLDivElement,
  context: HTMLDocument,
  length: 5,
  __proto__: Object[0]
 }

jQuery对象的原型是因为它的对象特别有意思，而不是jQuery.fn.init正如所预料的，也是[0]表示的东西，因为这是你得到你想要的时候。

The proto of the jQuery object is especially interesting since its the Object and not jQuery.fn.init as would be expected, also the [0] indicates something as this is what you get when you.

console.dir([])
// outputs Array[0] as the object name or Array[x] x being the internal length of the
// Array

我不知道的jQuery是如何设置它的原型为对象[0]​​但我的猜测是，答案就在那里的某个地方。任何人有什么想法？

I have no idea how jQuery has set it's proto to be Object[0] but my guess is that answer lies somewhere in there. Anyone got any ideas?

推荐答案

对象必须具有长度和拼接

> var x = {length:2, '0':'foo', '1':'bar', splice:function(){}}
> console.log(x);
['foo', 'bar']

---

和供您参考，对象[0]​​ 为原型是完全一样的道理。浏览器看到的原型本身作为一个数组，因为：

---

and FYI, the Object[0] as the prototype is for exactly the same reason. The browser is seeing the prototype itself as an array because:

$.prototype.length == 0;
$.prototype.splice == [].splice;

这篇关于数组像JavaScript对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！