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

Javascript: how to avoid losing a variable when using a triggered function

本文关键字：函数 变量 何避免 Javascript      更新时间：2023-09-26

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

除了明确使用实数和不使用变量之外，我看不出任何方法可以避免这种情况，但这使得代码真的不可持续。我是不是错过了一些隐藏的选项？

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:最后，这里已经解决了如何将JS变量的值（而不是引用）传递给函数？，我已将解决方案调整为我的

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);
    }
}

在for块中使用函数表达式时，必须传入迭代变量（本例中为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);
  }
}

当将j作为参数传递时，这似乎对我有效

graph = [{"label":["foo","dsa"]},{"label":["foo","dsa"]},{"label":["foo","dsa"]},{"label":["foo","dsa"]}];
combinations = [{"name":"foo"},{"name":"bar"},{"name":"boo"},{"name":"far"}];

for (var i=0; i<graph.length; i++) {
for (var j=0; j<combinations.length; j++) {
    graph[i].label[j] = function(j) {return this.x + ' text ' + combinations[j].name;}
}}
console.dir(graph);
相关文章：