Задать вопрос
AlexaShemetova
@AlexaShemetova
While I'm breathing - I love and believe
javascript

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

Мой вопрос из области использую, что то не зная, что это. Не могу взять в толк по какому принципу работает заимствование методов через 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);
 }
  • Вопрос задан
  • 2167 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 2
lazalu68
@lazalu68
Salmon
call это метод который позволяет вызвать функцию и явно указать её контекст, то есть объект к которому эта функция будет иметь доступ по идентификатору this. Slice это метод массива с помощью которого можно получить копию части или всего массива.

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

Зы: если у вас в переменной index должен лежать актуальный порядковый номер элемента, то совсем не обязательно для этого гонять slice+indexOf; для этого в объекте элемента есть соответствующее свойство. Хотя это говорят быстрее работает
Ответ написан
1 комментарий
1 комментарий
sergiks
@sergiks Куратор тега JavaScript
♬♬
Это один из способов преобразовать массиво-подобные HTMLCollection или Nodelist в настоящий массив со всеми его методами для последующей работы.

Другой вариант сделать то же самое, с современным синтаксисом:
const index = [...this.children];
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 1
@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]
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Нужен директолог с опытом работы
19 апр. 2024, в 10:02
6000 руб./за проект
Помощь с парсингом XML файла яндекс товаров
19 апр. 2024, в 09:46
500 руб./за проект
Обработать массив фотографий
19 апр. 2024, в 08:46
5000 руб./за проект
Ещё заказы