1

Здравствуйте, интересует как устроен объект NodeList и ему подобные.

введите сюда описание изображения

  1. Почему он NodeList отображается как массив childNodes: NodeList[9], а не так childNodes: NodeList и как это сделали?
  2. elem.childNodes.length сработает геттер на этом свойстве и возможно пересчитает содержимое, но почему оно дублируется в самом объекте и прототипе?
  3. И самое понятное для меня, учитывая особенности выше, почему имя прототипа такое же, как и у объекта, он наследует сам себя? Для чего так сделано и как?

Как структурно создать такой же объект? Если это возможно.

7
  • В js все объекты, даже функция, даже массив. А еще есть прототипы. Прочитай про прототипы, поймешь. 2 дек 2016 в 16:50
  • Про то что все объекты знаю, в первом вопросе условно сравнил его с массивом. Про прототипы тоже читал, но среди объектов "Животных" и "Людей" не нашел ответа на 2 и 3 вопрос. 2 дек 2016 в 16:57
  • @JarryRoxwell, предыдущий вопрос стоит удалить, раз уж написал новый
    – Grundy
    2 дек 2016 в 16:59
  • 1
    NodeList - это интерфейс WebAPI
    – Grundy
    2 дек 2016 в 17:00
  • 1
    там дальше есть ссылка на спецификацию по таким коллекциям.
    – Grundy
    2 дек 2016 в 17:16

2 ответа 2

2

NodeList - как уже говорилось ранее, это интерфейс, реализация которого скрыта в недрах браузера. Поэтому что именно делает свойство length и как оно работает именно для этой коллекции: перессчитывает при каждом обращении либо где-то кэширует значение, можно узнать лишь погрузившись в исходники конкретного браузера.


Что касается отображения просматриваемых объектов в консоли.

То, как именно показывает консоль, по большей части никак не регламентировано. Поэтому в разных браузерах вывод будет выглядеть по разному.

Если рассматривать конкретно Chrome.


Имя выводимое напротив proto можно определить использовав свойство с именем Symbol.toStringTag

Кроме того, данное свойство влияет на работу Object.prototype.toString

введите сюда описание изображения


Теперь самое интересное: для вывода как массива, консоль должна подумать, что выводит массив.

Самый простой путь: унаследоваться от класса Array

class MyArr extends Array{
}

введите сюда описание изображения

Но можно обойтись и обычными объектами.

Непонятно чем руководствовались разработчики, но при наличии в объекте свойства splice, со значением в виде функции, а так же свойства length, консоль Chrome начинает отображать данный объект как массив:

var base = {
    get length(){return 0;}
    splice(){}
}

Будет выглять в консоли так:

введите сюда описание изображения

и в развернутом виде:

введите сюда описание изображения

Теперь все готово, чтобы сделать объект очень похожий в выводе на NodeList

function NL() {
  this.splice = function() {};
}

NL.prototype = {
  length: 0, // значение свойства по умолчанию
  push(el) {
    this[this.length] = el;
    this.length++;
  },
  [Symbol.toStringTag]: "NL"
};


var nl = new NL();
nl.push(10);
nl.push(20);
console.debug({
  a: nl
});
console.log(nl + '');
console.log(Object.prototype.toString.call(nl));

При выполнении сниппета в консоли Chrome можно увидеть следующее:

введите сюда описание изображения

Что весьма похоже на картинку в вопросе.

0
  1. Это массивоподобный объект. Т. е. объект, ключи которого порядковые числа и есть свойство length. Эти объект почти всамделишные массивы, поэтому и есть общие черты. Кстати, вид подсказки зависит от браузера. Кто-то любезно подскажет длину, кто-то в скобках выведет сами узлы (FF), а кто-то выведет Object, кто будет верно, хотя и грубо :)
  2. Геттер необходим из-за того, что это, на самом деле, "живая" коллекция. Т. е. изменения в DOM, относительно узла, и происходит пересчёт.
    Правда это скорее догадка, буду рад, если знающий добавит суровых правил.
  3. Имя, как уже говорилось, может быть любым, зависит от браузера. Но логично что объект можно назвать в честь конструктора.

На счёт создания похожего объект я не понял. Создаёте конструктор, объект от него и вуаля.
Правда имя для пользовательского объекта подставит только хром, лиса презрительно назовёт объект как Object { ... }.

P. S. Конечно, не стоит игнорировать истину в предпоследней инстанции. Последняя инстанция тут.
Спасибо @Grundy за ссылки, без него пришлось бы гуглить :)

5
  • На счёт создания похожего объект я не понял: chrome выведет просто mytype, а не mytype[length]. :-) без определенных условий :)
    – Grundy
    3 дек 2016 в 8:20
  • @Grundy, т. е. как заставить консоль выводить с названием и длину? Никак, кастомный вывод только для типов, которые известны консоли. Возможно, в светлом будущем, возможно будет автоматически выводить по свойство length. Но это будущее. Вероятное.
    – user207618
    3 дек 2016 в 8:23
  • не совсем никак. но я нашел только для хрома вариант :)
    – Grundy
    3 дек 2016 в 8:32
  • @Grundy, поделитесь "как", мсье!
    – user207618
    3 дек 2016 в 8:38
  • Да собираюсь вот ответ написать :-0
    – Grundy
    3 дек 2016 в 9:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.