@prolina

This — undefined в стрелочной функции?

Почему this - undefined? Полагаю из-за стрелочной функции, но не знаю, как это исправить, кроме как переделать функцию на ES5, но хотелось бы оставить стрелочную.
const cards = document.querySelectorAll('.memory-card');

let hasFlippedCard = false;
let firstCard, secondCard;

const flipCard = () =>  {
    this.classList.add('flip'); // здесь ошибка

    if (!hasFlippedCard) {
        hasFlippedCard = true;
        firstCard = this; 
    };
};
cards.forEach(card => card.addEventListener('click', flipCard));
  • Вопрос задан
  • 102 просмотра
Решения вопроса 1
rockon404
@rockon404
Frontend Developer
const flipCard = e => {
  const card = e.currentTarget;
  card.classList.add('flip');
  // ...
};
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
filgaponenko
@filgaponenko
frontend developer
Стрелочная функция получает внешний, по отношению к себе, контекст;

Выше вариант с currentTarget правильный.

не знаю, как это исправить, кроме как переделать функцию на ES5, но хотелось бы оставить стрелочную


Стрелочные функции это инструмент, который нужно применять по назначению, если для решения вашей задачи можно написать function declaration, то лучше не усложнять себе(и тому, кто будет читать ваш код) жизнь, а сделать именно так.
Ответ написан
k12th
@k12th
console.log(`You're pulling my leg, right?`);
Во-первых, нет смысла применять стрелочные функции просто потому что они есть. В данном случае this равен undefined, потому что в строгом режиме this в глобальном скоупе указывает на undefined.

Во-вторых,
cards.forEach(card => card.addEventListener('click', flipCard));
— в корне неправильный подход. Почитайте про делегацию событий. Вкратце — навешиваем обработчик на cards, а в обработчике смотрим, куда именно кликнули и соответственно обрабатываем.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы