命名的功能并添加事件监听到它会导致“没有定义”

Question

我还是新来的JavaScript，我有以下问题。

我想名称/声明我的函数，然后使用它的名称为收听添加/删除轻松点击事件。这种情况的主要原因是这样我就可以随时删除某个条件发生的单击事件。

简短的我想要实现：

function game() {
// 
}

我遇到的问题是，当我添加事件是这样的：

for (let i = 0; i < cards.length; i++) {
    card = cards[i];
    card.addEventListener('click',  game);
}

我得到的命名函数游戏一个错误，指出：

我没有定义

然而，当我把函数为匿名listener参数这里面的错误不会发生。

for (let i = 0; i < cards.length; i++) {
    card = cards[i];
    card.addEventListener('click', function game() {
      //
}

声明i全球范围内没有工作，也没有经过i作为参数。

• 全部代码匿名函数：Here
• 完整的代码名为功能（我想工作的）：Here

Answer 1

要访问不同is，你需要不同的关闭，因此你有不同的功能的引用。您可以直接在卡上存储他们以后能够删除他们：

for (let i = 0; i < cards.length; i++) {
  const card = cards[i];
  card.addEventListener('click', card._click = function game() {
    //
  });
}

然后，你可以在以后将其删除：

card.removeEventListener("click", card._click);

---

如果你向外移动的game并添加咖喱参数i（可能是清洁剂）同样也适用：

const game = i => () => {
  // ...
 };

for (let i = 0; i < cards.length; i++) {
  const card = cards[i];
  card.addEventListener('click', card._click = game(i));
}

Answer 2

你的问题是，你的game功能不知道i因为i没有你game函数中存在的因变量范围。为了解决这个问题，你可以通过i作为一个参数到像这样game：

card.addEventListener('click', _ => game(i));

在上面的线，你调用一个箭头的功能，然后调用game功能。这允许您将参数传递到game。

然后在您的game方法接受可变i作为参数：

function game(i) {

见工作示例here

Answer 3

你应该阅读有关在javascript lexical scoping理解为什么i不可命名的功能game内

游戏内的功能，它只能是指在词法范围内的变量（或内部this这是它自己的一个话题）

简单地说，你可以通过“我”的游戏，使其能工作。但由于预期的addEventListener的函数，你应该创建一个函数工厂，采用位closure的

编辑您的游戏中

let game = (i) => () => {
  //existing game function 
}

现在使用card.addEventListener('click', game(i));和预期它应该工作

这是给你的参考工作小提琴：https://jsfiddle.net/uch1arny/2/