Javascript 经典恶名昭彰的循环困境的变异

几乎每个人都遇到过这个具体问题：

function addLinks () {
    for (var i=0, link; i<5; i++) {
        link = document.createElement("a");
        link.innerHTML = "Link " + i;
        link.onclick = function () {
            alert(i);
        };
        document.body.appendChild(link);
    }
}
window.onload = addLinks;

我们还可以使用自动执行的anon-fn来创建闭包，等等

我的处境

我面临的问题是相同的，但背景有点不同。这里有一个：

点击“添加更多lis”几次，然后点击“点击我”，这将提醒

-1

。将缓存

maxIndex

的值。相关代码：

  var attached = false;

function actions() {
    var elements = $('body').find('li');
    var maxIndex = elements.length -1;


        var cycle = {
            next: function() {
                alert( maxIndex );
            }
        };

        if ( !attached ) {
            $('#next').click(function(e) {
                cycle.next();
            });
            attached = true;
        }

};

actions();

$('#add').click(function(e) {
    e.preventDefault();
    $('<li/>').text('god').appendTo('body');
    actions();
});

var-attached=false；
函数操作（）{
变量元素=$（'body'）。查找（'li'）；
var maxIndex=elements.length-1；
风险值周期={
下一步：函数（）{
警报（最大索引）；
}
};
如果（！附件）{
$（“#下一步”）。单击（函数（e）{
cycle.next（）；
});
附加=正确；
}
};
动作（）；
$（'#添加'）。单击（函数（e）{
e、 预防默认值（）；
$（“
”）.text（'god'）.appendTo（'body'）；
动作（）；
});

我尝试过应用闭包，但没有效果。（请参阅并向下至/1/）

我不想将

与

语句或

let

语句/表达式一起使用来解决这个问题。我知道另一种解决方法是将

maxIndex

更改为命名对象的属性。这是一个这样做的工作

---

我想知道的是，是否有一种方法可以让它工作，同时将

元素

变量定义保持在

操作

函数中，并将

maxIndex

变量定义在同一范围内？基本上，可以调整为几乎以相同的方式工作，而不依赖于with/let/object属性？

奇怪的是，有时创建一个彻底的问题实际上可以帮助您解决它，我发誓我事先没有解决它

我刚刚在

actions

范围之外创建了

maxIndex

变量，并在内部实际分配了它。。这使得它能够工作，因为它不是在同一个函数范围内定义的，因此绑定的行为不同

---

（有多尴尬？

您提到值是“缓存的”——更准确地说，闭包实际上只是保存对最终引用原始实例的范围链的引用。

  var attached = false;

function actions() {
    var elements = $('body').find('li');
    var maxIndex = elements.length -1;


        var cycle = {
            next: function() {
                alert( maxIndex );
            }
        };

        if ( !attached ) {
            $('#next').click(function(e) {
                cycle.next();
            });
            attached = true;
        }

};

actions();

$('#add').click(function(e) {
    e.preventDefault();
    $('<li/>').text('god').appendTo('body');
    actions();
});