Javascript中的数组类对象

Question

我想知道 jQuery 是如何构造它的类数组对象的。我要解决的关键问题是它如何设法让控制台将其解释为数组并按原样显示。我知道它与长度属性有关，但玩了一会儿后我不太明白。

我知道这与像下面示例中的普通数组这样的对象相比没有技术优势。但我认为这是用户在测试和调试时的重要语义元素。

像 Object 一样的普通数组。

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 的输出位置

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 对象的原型特别有趣，因为它是 Object 而不是 jQuery.fn.init，正如预期的那样，[0] 也表示一些东西，因为这是你得到的。

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

我不知道 jQuery 是如何将它的原型设置为 Object[0] 的，但我的猜测是答案就在那里。有人有什么想法吗？

Answer 1

对象必须有length 和splice

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

---

和仅供参考，Object[0] 作为原型是出于完全相同的原因。浏览器将原型本身视为一个数组，因为：

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

Answer 2

像这样？

function foo() {
  this.push('hello');
}
foo.prototype = [];

var bar = new foo();
console.log(bar.length); // 1
console.log(bar); // ["hello"]