How is $('h1') logging to the web console as an array in jQuery?
browser, console, javascript, jquery, logging
Solution
You make your object inherit `Array` using the prototype, like so:
function SomeType() {
this.push(16);
}
SomeType.prototype = [];
SomeType.prototype.constructor = SomeType; // Make sure there are no unexpected results
console.log(new SomeType()); // Displays in console as [16]
And, of course, all jQuery objects are instances of the `jQuery` function/constructor, so that's how jQuery does it. As a bonus, because of the inheritance, you get all the methods from `Array`, and the indexing that comes with it too!
Problem
If you do `console.log($('some selector'))` in the browser, it returns what looks like an array (first line): But notice that it's not an `instanceof Array`, but it's actually the `jQuery` object. When you do `console.dir($('h1'))`, it shows it's actually the jQuery object. The question is, how are they making it look like it's an array in the web console? I noticed in the jQuery source here they add reference to a few Array and Object methods, and here they add `toArray` (and slice and others) to the `jQuery` object. Is the web console somehow checking for these methods and if it finds one (`toArray`, `indexOf`, `slice`, etc.), it prints it as an Array? I would like to get this behavior out of any custom object, such as the `Ember.ArrayProxy`. Currently when you log the `Ember.ArrayProxy` it shows `> Object` or whatever, but it would be nice to show it as an array. Any ideas?