javascript - 如何在 JavaScript 中强制计算 for 循环内的变量？

Question

我目前遇到一个问题，我动态创建一组 div，并在创建它们时为它们分配一个 onclick() 事件。代码的简化版本如下所示:

for(DayOfTheWeek = 0; DayOfTheWeek < 7; DayOfTheWeek++){
  var EventCell = document.createElement('div');
  var EventDayIndex = WeekNumber*7 + DayOfTheWeek + EventoDayOffset;
  EventCell.onclick = function(){ClickableDivFunction(EventDayIndex)};
}

我遇到的问题是我的所有 div 集都使用计算出的最终 EventDayIndex 的参数调用 ClickableDivFunction。这是我的所有 7 个 div 都执行 ClickableDivFunction(6)，而不是我的第一个 div 执行 ClickableDivFunction(0)、第二个 ClickableDivFunction(1) 等等。

在这个论坛上搜索时，我发现了以下内容 answer这解释了我的问题。基本上，EventDayIndex 不仅会评估并将其在每次迭代中获得的值保留在为 onclick 事件定义的函数中。

我尝试了几种方法，例如尝试将 EventDayIndex 转换为字符串，希望 ClickableDivFunction 的参数保持其值。尝试添加另一个变量，使用“+”运算符生成字符串，然后向 ClickableDivFunction 添加过滤器以删除额外的文本(这是我试图通过执行以下操作来强制评估 EventDayIndex:

var NewVar = ClickableDivFunction + "#";

然后删除调用函数中的“#”。)在所有情况下我都得到了相同的结果。所以我的问题是，你们建议如何以安全、可维护的方式解决这个问题？我假设人们过去会遇到这个问题，我只是没有足够的编程知识来知道要搜索什么，但我能想到解决这个问题的所有事情要么是转换为文本，要么找到一个按值对变量进行赋值的方法。

如果您能提供有关此问题的帮助或答案的链接，我将不胜感激。

Answer 1

JavaScript 通过函数而不是您可能习惯的循环或 block 来确定其变量的范围。因此，如果您希望每个 div 都有一个单独的变量，则需要单独的函数调用。

for(DayOfTheWeek = 0; DayOfTheWeek < 7; DayOfTheWeek++){
  createEventCell(WeekNumber*7 + DayOfTheWeek + EventoDayOffset);
}

function createEventCell(EventDayIndex) {
  var EventCell = document.createElement('div');
  EventCell.onclick = function() { ClickableDivFunction(EventDayIndex); };
}

这是不同的，因为每次调用 createEventCell 都会获得自己的作用域(这就是您期望原始代码中每个循环发生的情况)。

JavaScript 使得创建新函数并传递它们变得非常容易，所以这最终不会像乍看起来那么麻烦，而且您可能会注意到您的代码变得更小、更紧凑，并且重用起来更有趣。当您更熟悉该语言时，请查看 underscore.js 。