Задать вопрос
@Improvinger
javascript

Метод call объекта-функции в js как работает?

[].indexOf.call(this.children, event.target);
Помогите с объяснением, как работает эта часть скрипта. Я понимаю, что он как-то пушит в массив и вытаскивает индекс, но вот логику не понимаю.
  • Вопрос задан
  • 511 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 2
sergiks
@sergiks Куратор тега JavaScript
♬♬
У массивов есть метод indexOf()
Но его, видимо, нет у this.children, а хочется.

Поэтому берут пустой массив [] и его метод indexOf
и вызывают его через call() (подробнее)
применительно не к тому пустому массиву,
а подставив методу indexOf в качестве this (где искать) — this.children,
и вместо 1-го аргумента (что искать) — event.target

Этот код ищет event.target среди this.children
и возвращает его индекс или -1, если не нашлось.
Ответ написан
Комментировать
Комментировать
@abberati
frontend-разработчик
Давай по порядку

const result = [].indexOf.call(this.children, event.target)


[]
Пустой массив

[].indexOf
Метод массива. Он же функция. Если вызвать его как есть ([].indexOf(42)), то он будет искать в пустом массиве, следовательно ничего не найдёт. Он работает на this, то есть в теле этого метода this указывает на массив [], по this и происходят итерации для поиска. В случае [1,2,3].indexOf он внутри будет итерироваться по this, которое указывает на [1,2,3]

[].indexOf.call
Метод любой функции. Позволяет вызвать этот метод с явным указанием, чем будет являться this. В приведённом примере это this.children. Все остальные аргументы будут переданы в indexOf.

Трюк в том, что метод indexOf есть только у массивов, но искать индекс этот метод может не только в массиве, но вообще в любой структуре, у которой есть поле length и остальные поля, доступные через численный ключ.

Приведённая запись – способ вызвать метод массива на псевдомассиве.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
ThunderCat
@ThunderCat Куратор тега JavaScript
{PHP, MySql, HTML, JS, CSS} developer
5e7d0b745cebf502411281.jpeg
Ответ написан
6 комментариев
6 комментариев
@Improvinger Автор вопроса 
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Event Delegation in JavaScript - jQuery in Action, 3rd edition</title>
      <link rel="stylesheet" href="../css/main.css"/>
   </head>
   <body>
   <li>Item 1</li>
      <ul id="my-list">
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
         <li>Item 4</li>
         <li>Item 5</li>
      </ul>

      <script>
         document.getElementById('my-list').addEventListener('mouseover', function(event) {
            if (event.target.nodeName === 'LI') {
			var arr = [];
               console.log('List item: ' +
                       (arr.indexOf.call(
                               document.getElementById('my-list').children,
                               event.target
                       ) ) 
               );
			   
            } 
			
         }, false);
Тут получается call передает данные в массив временно ?
Ответ написан
3 комментария
3 комментария
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Несложная верстка из Figma bootstrap5 scss npm
18 дек. 2024, в 04:59
1000 руб./в час
Отправка команды на открытие всех окон автомобиля Chery Tiggo 7 Pro
18 дек. 2024, в 03:28
16000 руб./за проект
Установить музыкальный софт
18 дек. 2024, в 01:04
5000 руб./за проект
Ещё заказы