Javascript:使用触发函数时如何避免丢失变量

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 8 年前。

我正在构建几个在用户单击链接时触发的函数。问题是我使用循环来减少代码，但该循环使用局部变量。当用户单击链接 -> 执行该函数时，该变量会丢失并(逻辑上)显示为未定义。

除了显式使用实数且不使用变量之外，我看不出有任何方法可以避免这种情况，但这使得代码确实不可持续。我在这里错过了一些隐藏选项吗？

for (var i=0; i<graphs.length; i++) {
    for (var j=0; j<combinations.length; j++) {
        graph[i].label[j] = function() {return this.x + ' text ' + combinations[j].name;}
    }
}

这将返回逻辑“组合[j]未定义”错误。我可以执行以下操作

for (var i=0; i<graphs.length; i++) {
    graph[i].label[0] = function() {return this.x + ' text ' + combinations[0].name;}
    graph[i].label[1] = function() {return this.x + ' text ' + combinations[1].name;}
    graph[i].label[2] = function() {return this.x + ' text ' + combinations[2].name;}
    graph[i].label[3] = function() {return this.x + ' text ' + combinations[3].name;}
    graph[i].label[4] = function() {return this.x + ' text ' + combinations[4].name;}
}

它之所以有效，是因为所有这些变量都是全局的(假设它们可以通过全局变量访问)(除了前面的循环变量 i 和 j)

有什么想法吗？干杯

更新:事实证明，我只是通过声明另一个变量就解决了这个问题，也许它有效是因为它是在每次迭代中创建的？我忽略它，但它按应有的方式工作(可能是因为 highcharts.js 内部的工作方式)

for (var i=0; i<graphs.length; i++) {
    for (var j=0; j<combinations.length; j++) {
        var workaround1 = i;
        var workaround2 = j;
        graph[i].label[j] = function() {return this.x + ' text ' + combinations[workaround2 ].name;}
    }
}

更新2:不，这没有帮助，因为变量存储最后一个值，而这是检索到的值。问题仍然存在。

更新3:最后，已经在这里解决了How do I pass the value (not the reference) of a JS variable to a function? ，我已经根据我的情况调整了解决方案

for (var i=0; i<graphs.length; i++) {
    for (var j=0; j<combinations.length; j++) {
        (function(g) {
        graph[i].label[j] = function() {return this.x + ' text ' + combinations[j].name;}
        })(g);
    }
}

Answer 1

当您在 for block 中使用函数表达式时，您必须传入迭代变量(此中的 i 和 j案件)。这告诉函数表达式确切的值而不让它被处理

for (var i=0; i<graphs.length; i++) {
   for (var j=0; j<combinations.length; j++) {
      graph[i].label[j] = function(j) {return this.x + ' text ' + combinations[j].name;}
                                // ^ pass it into the function
   }
}

<小时/>

回应评论:是的你可以做2个变量。这是一个粗略的模型

var graph = [1, 2, 3, 4, 5];
var combin = ['a', 'b', 'c', 'd'];

for (var i = 0; i < graph.length; i++) {
  for (var j = 0; j < combin.length; j++) {
    (function(x, y) {
      console.log('[' + x.toString() + ',' + y.toString() + '] =' + graph[x] + combin[y]);
    })(i, j);
  }
}