Что заставляет объект jQuery отображаться как массив в инструментах разработчика Chrome?

Мне интересно, как возможно, что объекты jQuery отображаются в виде массива в журнале консоли инструментов разработчика в Chrome.

Например. если я выполню $('<a>'), в журнале консоли я увижу следующее:

[<a>​</a>​]

Но следующие утверждения ложны:

var a = $("<a>");

Array.isArray(a);   // false
a instanceof Array; // false

Я попытался изменить jQuery и посмотреть, что произойдет, и меня удивило то, что удаление length из функции jQuery удаляет нотацию массива:

length: 0, // commenting this line removes array notation

Вместо этого он отображается как (стрелка сплошная, чтобы расширить):

> jQuery.jQuery.fn.jQuery.init

Но если я попытаюсь создать свой собственный конструктор, который должен отображаться в виде массива, он не сработает:

var test = function() { this.length = 0 };

new test();

// Logged (arrow is same one as before):
// > test

Поэтому мне интересно, что в коде jQuery заставляет инструменты разработчика отображать экземпляры в виде массива. Какое свойство/функция/вещь добавляется в jQuery, что заставляет инструменты разработчика обрабатывать его как массив при отображении экземпляра?


person pimvdb    schedule 31.08.2011    source источник


Ответы (2)


Из http://api.jquery.com/jQuery.makeArray/:

Многие методы как в jQuery, так и в JavaScript в целом возвращают объекты, похожие на массивы. Например, фабричная функция jQuery $() возвращает объект jQuery со многими свойствами массива (длина, оператор доступа к массиву [] и т. встроенных методов массива (таких как .pop() и .reverse()).

По сути, объект должен иметь свойства length и splice, чтобы быть похожим на массив. Вот соответствующий вопрос SO: Array Like Objects in Javascript

person Boris Smus    schedule 31.08.2011
comment
Чтобы убедиться в этом, вы можете запустить console.log({'0': 'asd','1': 'asd', length: 2, splice: function () {}}) в консоли. - person Quentin; 23.02.2012
comment
кто-нибудь знает, почему Chrome по-разному относится к splice? к вашему сведению, это работает только в Chrome, но не в другом браузере. - person yqlim; 15.11.2017

Вы, наверное, знаете это, но console.log не отображает переданный контент «как есть», он пытается быть «умным» и выполняет некоторую постобработку. Если вы хотите увидеть исходный объект «как есть», есть метод console.dir.

person serg    schedule 31.08.2011
comment
Я знаю о console возможностях; Мне просто интересно, как jQuery показал себя как массив, хотя он им не является. - person pimvdb; 31.08.2011