箭头函数中的此关键字绑定问题 [Duplicate]

问：

我正在研究一个带有单击事件侦听器到箭头函数的 javascript bind 关键字的测试用例并使用关键字添加类，我试图绑定我的函数，但每次关键字都指向窗口对象，我想指向事件对象。thisthisthis

这是我的代码。

const cards = document.querySelectorAll(".card");

var isFlipped = false;
var firstCard;
var secondCard;

const flip = ( ) => {
  console.log(this);
  this.classList.add("flip");
  if (!isFlipped) {
    isFlipped = true;
    firstCard = this;
  } else {
    secondCard = this;
    console.log(firstCard);
    console.log(secondCard);
  }
}

Array.from(cards).map(card => card.addEventListener("click", flip.bind(this) ));

这是您要检查的 HTML

<div class="gameContainer">
      <div class="container">
        <h1 class="text-center text-white display-4">How is your memory</h1>
      </div>
      <div class="card" data-image="evilface">
        <img src="evilface.png" class="front flip" alt="evilface" />
        <img src="lco.png" class="back" alt="lco" />
      </div>
</div>

注意：当然，我可以将箭头功能转换为正常功能，这将按扩展方式工作，但是我想要带有箭头功能的功能。