Как работает Array.prototype.slice.call?

Question

[Александра]

Мой вопрос из области использую, что то не зная, что это. Не могу взять в толк по какому принципу работает заимствование методов через Array.prototype.slice.call, в данном случае пример такой. Получаю массив элементов родителя, внутри которого совершен клик, но как именно работает этот метод? Объясните нубику плиз

<ul class="link-list">
   <li>- тест</li>
   <li>- тест</li>
   <li>- тест</li>
</ul>

document.querySelector('.link-list').onclick = function(e) {
     var index = Array.prototype.slice.call(this.children).indexOf(e.target);
 }

Comments

[Сергей Соколов]

Замените, пожалуйста, картинку текстом кода в тегах <code>

Answer 1

[Kovalsky]

call это метод который позволяет вызвать функцию и явно указать её контекст, то есть объект к которому эта функция будет иметь доступ по идентификатору this. Slice это метод массива с помощью которого можно получить копию части или всего массива.

Node.children принадлежит классу HTMLCollection, поэтому у него нету методов доступных массивам, хоть он и по структуре идентичен массиву. А slice копирует эту коллекцию только уже в виде массива, в результате чего к этому же самому набору элементов мы можем применить методы присущие массивам.

Зы: если у вас в переменной index должен лежать актуальный порядковый номер элемента, то совсем не обязательно для этого гонять slice+indexOf; для этого в объекте элемента есть соответствующее свойство. Хотя это говорят быстрее работает

Comments

[Александра]

спасибо, очень доступно объяснил)

Answer 2

[Сергей Соколов]

Это один из способов преобразовать массиво-подобные HTMLCollection или Nodelist в настоящий массив со всеми его методами для последующей работы.

Другой вариант сделать то же самое, с современным синтаксисом:
const index = [...this.children];

Comments

[Александра]

Спасибо большое, все прояснилось)

Answer 3

[alexfarm2]

slice() или slice(0) - копирует массив (делает срез, начиная с нулевого элемента)
При вызове без аргументов, параметр считается undefined, что преобразуется в ноль
Array.prototype - это реальный объект, у которого есть метод slice()
var a=Array.prototype.slice(0); -копируем объект Array.prototype в а
var a=Array.prototype.slice(); -делаем то же самое

Массивоподобный объект (псеводмассив) — это объект, который структурно похож на массив. У него есть числовые свойства (индексы) и свойство length.

Вот пример массивоподобного объекта:
var object = {0: 1, 1: 2, 2: 3, length: 3}

Преобразуем массивоподобный объект в массив:
var array = Array.prototype.slice.call(object); // Или сокращённая форма: [].slice.call(object);

Здесь мы вызываем метод slice на объекте Array.prototype, но контекстом является объект object, т.е. пытаемся сделать срез с объекта object, начиная с нулевого элемента. Срезом будет полноценный массив.

console.log( array ); // [1, 2, 3]

Можно вызвать slice и с параметром:
var array2 = Array.prototype.slice.call(object,1);

console.log( array2 ); // [2, 3]