Array Like Objects en Javascript

Question

Je me demandais comment jQuery construire du tableau comme objet. La clé de chose que je suis en train de travailler sur est de savoir comment il parvient à obtenir la console à l'interpréter comme un tableau et l'afficher comme tel. Je sais qu'il a quelque chose à voir avec la longueur de la propriété, mais après avoir joué un peu, je n'arrive pas à le comprendre.

Je sais que cela n'a aucun avantage technique sur un tableau normal comme objet, comme dans l'exemple ci-dessous. Mais je pense que c'est un important élément sémantique lorsque les utilisateurs sont de test et de débogage.

Un Tableau normal comme Objet.

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
}

Où que jQuery serait sortie de

var jQArray = $('div')

console.log(jQArray);

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

Si vous exécutez

console.dir(jQArray)

// Outputs

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

Le proto de l'objet jQuery est particulièrement intéressant, car ses l'Objet et non pas JQuery.fn.init comme prévu, également l' [0] indique que quelque chose comme ce est ce que vous obtenez lorsque vous.

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

Je n'ai aucune idée de comment jQuery a mis proto être l'Objet[0], mais ma conjecture est que la réponse se trouve quelque part là-dedans. Quelqu'un a des idées?

Answer 1

L'objet doit avoir length et splice

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

---

et FYI, le Object[0] comme le prototype est exactement pour la même raison. Le navigateur voit le prototype lui-même comme un tableau car:

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

Answer 2

Comme ça?

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

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