引用我自己对第一个示例的解释：

JavaScript 的作用域是函数级的，而不是块级的，创建闭包只是意味着将封闭的作用域添加到封闭函数的词法环境中。

循环终止后，函数级变量 i 的值为 5，这就是内部函数“看到”的。

在第二个示例中，对于每个迭代步骤，外部函数文字将评估为具有自己的作用域和局部变量 的新函数对象num，其值设置为的当前值i。由于num从未修改过，它将在闭包的整个生命周期内保持不变：由于函数对象是独立的，因此下一个迭代步骤不会覆盖旧值。

请记住，这种方法效率很低，因为必须为每个链接创建两个新的函数对象。这是不必要的，因为如果您使用 DOM 节点进行信息存储，它们可以很容易地共享：

function linkListener() {
    alert(this.i);
}

function addLinks () {
    for(var i = 0; i < 5; ++i) {
        var link = document.createElement('a');
        link.appendChild(document.createTextNode('Link ' + i));
        link.i = i;
        link.onclick = linkListener;
        document.body.appendChild(link);
    }
}

我们在页面上有 5 个 div，每个都有一个 ID ... div1, div2, div3, div4, div5

jQuery 可以做到这一点......

for (var i=1; i<=5; i++) {
    $("#div" + i).click ( function() { alert ($(this).index()) } )
}

但真正解决这个问题（并慢慢建立它）......

第1步

for (var i=1; i<=5; i++) {
    $("#div" + i).click (
        // TODO: Write function to handle click event
    )
}

第2步

for (var i=1; i<=5; i++) {
    $("#div" + i).click (
        function(num) {
            // A functions variable values are set WHEN THE FUNCTION IS CALLED!
            // PLEASE UNDERSTAND THIS AND YOU ARE HOME AND DRY (took me 2 years)!
            // Now the click event is expecting a function as a handler so return it
            return function() { alert (num) }
        }(i) // We call the function here, passing in i
    )
}

简单易懂的替代方案

如果您无法理解这一点，那么这应该更容易理解并且具有相同的效果......

for (var i=1; i<=5; i++) {

    function clickHandler(num) {    
        $("#div" + i).click (
            function() { alert (num) }
        )
    }
    clickHandler(i);
    
}

如果您记得在调用函数时设置了函数变量值，这应该很容易理解（但这使用与以前完全相同的思维过程）

基本上，在第一个示例中，您将处理程序i内部onclick直接绑定到处理程序i外部onclick。因此，当处理程序的i外部onclick发生变化时，处理程序的i内部onclick也会发生变化。

在第二个例子中，而不是将其绑定到num在onclick处理程序中，你传递给函数，然后绑定到num在onclick处理程序。当您将其传递给函数时，i会复制的值，而不是绑定到num。所以当i变化时，num保持不变。复制的发生是因为 JavaScript 中的函数是“闭包”，这意味着一旦将某些内容传递给函数，它就会“关闭”以供外部修改。

其他人已经解释了发生了什么，这里有一个替代解决方案。

function addLinks () {
  for (var i = 0, link; i < 5; i++) {
    link = document.createElement("a");
    link.innerHTML = "Link " + i;

    with ({ n: i }) {
      link.onclick = function() {
        alert(n);
      };
    }
    document.body.appendChild(link);
  }
}

基本上穷人让绑定。

在第一个示例中，您只需将此函数绑定到 onclick 事件：

function() {alert(i);};

这意味着在点击事件上 js 应该提醒 addlink 函数 i 变量的值。由于 for loop()，它的值将是 5。

在第二个示例中，您生成一个与另一个函数绑定的函数：

function (num) {
  return function () { alert(num); };
}

这意味着：如果用一个值调用，返回一个函数来提醒输入值。例如调用function(3)将返回function() { alert(3) };。

您在每次迭代时使用值 i 调用此函数，因此您为每个链接创建单独的 onclick 函数。

关键是在第一个示例中，您的函数包含一个变量引用，而在第二个示例中，在外部函数的帮助下，您将引用替换为实际值。这大致称为闭包，因为您将变量的当前值“封闭”在函数中，而不是保留对它的引用。