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

Question

[prolina]

Почему 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));

Comments

[painmaker]

Совершенно верно мыслите. Стрелочные функции не имеют собственного this

[NiyazNA]

Еще советую использовать "use strict"

Answer 1

[Филипп Гапоненко]

Стрелочная функция получает внешний, по отношению к себе, контекст;

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

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

Стрелочные функции это инструмент, который нужно применять по назначению, если для решения вашей задачи можно написать function declaration, то лучше не усложнять себе(и тому, кто будет читать ваш код) жизнь, а сделать именно так.

Comments

[prolina]

Благодарю за развернутый ответ.

Answer 2

[Константин Китманов]

Во-первых, нет смысла применять стрелочные функции просто потому что они есть. В данном случае this равен undefined, потому что в строгом режиме this в глобальном скоупе указывает на undefined.

Во-вторых,

cards.forEach(card => card.addEventListener('click', flipCard));

— в корне неправильный подход. Почитайте про делегацию событий. Вкратце — навешиваем обработчик на cards, а в обработчике смотрим, куда именно кликнули и соответственно обрабатываем.

Answer 3

[Антон Спирин]

const flipCard = e => {
  const card = e.currentTarget;
  card.classList.add('flip');
  // ...
};

Comments

[prolina]

const cards = document.querySelectorAll('.memory-card');

let hasFlippedCard = false;
let firstCard, secondCard;

const flipCard = (e) =>  {
    const card = e.currentTarget;
    card.classList.add('flip');

    if (!hasFlippedCard) {
        hasFlippedCard = true;
        firstCard = this;
        return;
    }
    secondCard = this;
    hasFlippedCard = false;
    checkForMatch();
};

const checkForMatch = () => {
    if (firstCard.dataset.color === secondCard.dataset.color) {
        removeFlipCards();
        return;
    }
    unFlippedCards();
};

const removeFlipCards = () => {
    firstCard.style.display = 'none';
    secondCard.style.display = 'none';
};

const unFlippedCards = () => {
    setTimeout(() => {
         firstCard.classList.remove('flip');
         secondCard.classList.remove('flip');
     }, 1500);
};

 cards.forEach(card => card.addEventListener('click', flipCard));

Cannot read property 'color' of undefined. А как здесь быть?

[Антон Спирин]

prolina, вы же полностью не убрали this из flipCard. Подумайте, на что его надо заменить.

[prolina]

Антон Спирин, да, точно, извините)