生成的JavaScript函数中的变量不按预期运行

我在循环中生成函数时遇到了一些JavaScript问题.

我想要这个工作的方式是一个for循环,每次迭代,生成一个名为doStuff+ 的函数i.例如,第一次迭代将生成doStuff1()第二次生成doStuff2(),依此类推等等.功能本身(为了示例)只需要打印出来i- 即doStuff1()打印1,doStuff2()打印2等.

实际发生的是i,不会"坚持"在功能中.它成为全球范围的一部分或其他东西,所以每个功能都是10.如果单击下面代码段中的第一个按钮,则可以看到此信息.

使用生成器功能

在示例二中,我尝试使用function*符号来创建适当的函数生成器.我很确定我之前已经实现了它,但我之前从未使用过这种表示法,所以我可能会离开.如果是这样的话,请告诉我.

其结果与示例2相同.

使用字符串而不是整数

例如三,我决定尝试使用字符串而不是整数,它的工作原理!对于每次迭代,a都附加到一个字符串,所以当我按顺序运行生成的函数时,我会得到一个漂亮的小金字塔a.

在不同的地方声明和分配变量

由于我必须stringOut在示例3 中将变量定义在不同的范围内,所以我决定尝试使用与示例4中的数字相同的变量,并且它再次起作用!这对我来说没有多大意义,因为在更高的范围内似乎更容易遭受与例1和2相同的问题.

例3和4如何工作,而1和2不工作？编辑:我的代码坏了.它都不起作用.

我是否function*正确使用了发电机声明？

什么是最好的(最简单,最简洁,最易读)的方法呢？我知道制作一系列函数可能是最好的,但在这种情况下这是不可能的.

示例代码:

function test1() {
  document.getElementById("output").innerHTML = "#1 Output:";
  var myFunctions = [];

  for (var i = 0; i < 10; i++) {
    myFunctions[i] = function() {
      document.getElementById("output").innerHTML += "
" + i;
    }
  }

  for (var j = 0; j < 10; j++) {
    myFunctions[j]();
  }
}

function test2() {
  document.getElementById("output").innerHTML = "#2 Output:";
  window.test2Funcs = {};
  function* Generator() {
    var functionName = "doStuff";
    var number = 0;
    while (number < 10) {
    number++;
    yield {
        myFunction: function() {
        document.getElementById("output").innerHTML += "
" + number;
        },
        name: functionName + (number)
      }
    }
  }
  
  var generator = new Generator();
  for (var k = 0; k < 10; k++) {
    var out = generator.next().value;
    window.test2Funcs[out.name] = out.myFunction;
  }
	
  for (var l = 1; l < 11; l++) {
    func = "doStuff" + l;
    test2Funcs[func]();
  }
}

function test3() {
  document.getElementById("output").innerHTML = "#3 Output:";
  var myFunctions = [];
  var stringOut = "";
  for (var i = 0; i < 10; i++) {
    stringOut += "a"; // Edit. Moved from within function below.
    myFunctions[i] = function() {
      document.getElementById("output").innerHTML += "
" + stringOut;
    }
  }

  for (var j = 0; j < 10; j++) {
    myFunctions[j]();
  }
}

function test4() {
  document.getElementById("output").innerHTML = "#4 Output:";
  var myFunctions = [];
  var numOut = 0; // Edit. Used to be var numOut = "";
  for (var i = 0; i < 10; i++) {
    numOut++; // Edit. Moved from within function below.
    myFunctions[i] = function() {
      document.getElementById("output").innerHTML += "
" + numOut;
    }
  }

  for (var j = 0; j < 10; j++) {
    myFunctions[j]();
  }
}

document.getElementById("test1").addEventListener("click", test1);
document.getElementById("test2").addEventListener("click", test2);
document.getElementById("test3").addEventListener("click", test3);
document.getElementById("test4").addEventListener("click", test4);

1st Attempt
2nd Attempt
3rd Attempt
4th Attempt

Output: