javascript - 闭包问题。有小费吗？

Question

我对下面与闭包相关的代码有疑问，需要一些帮助。

如您所见，我在 for 循环中创建了多个图像，并分配了不同的 ID(即数组中的数字)。到目前为止，一切都很好。当我单击不同的图像时，我希望使用图像 ID 作为参数调用函数 showId，但问题是用作函数参数的数字始终变为 nr 8(数组中的最后一个数字)。我该如何解决这个问题？

提前致谢。

var imageArea = document.getElementById('imageArea');
var nrArray = [1,2,3,4,5,6,7,8];

for (var i = 0; i < nrArray.length; i++){
    var image = document.createElement('img');
    image.src = "images/theimage.png";
    image.id = nrArray[i];
    imgArea.appendChild(image);
    image.addEventListener ('click',function() {showId(image.id);},false);
}

Answer 1

在 stackoverflow 上对这个完全相同的问题有无数的答案，我马上会找到一些答案，但这里是关键点:

• Javascript 有词法作用域(不是动态作用域)
• javascript 中最小的 Javascript 作用域是一个函数
• block 不有自己的范围
• Javascript 使用变量提升，这意味着作用域中的所有变量都在作用域执行之前找到并移动到作用域的开头。这意味着 var image = ... 并不在您认为的位置。只有一个 image 变量，它(由于词法作用域)是您在闭包中访问的变量，在循环结束时显然会指向最后一个迭代项。
• 函数是一流的对象，这意味着它们被视为变量，可以这样分配和传递
• 您可以通过创建自执行匿名函数为变量创建一个稳定的作用域

例如:

(function(localImage) {
    image.addEventListener ('click',function() {showId(localImage.id);},false);
})(image);

此外，正如其他人所指出的，事件监听器闭包是在它们绑定(bind)的上下文中执行的。所以相反，不用担心使用 close 来修复范围，你可以这样做:

image.addEventListener ('click',function() {showId(this.id);},false);

编辑

类似问题的一些链接和对答案的一些不同观点:

• Accessing loop iteration in a sub-function?
• Closures in a for loop and lexical environment
• Strange things in JavaScript “for”
• Event handlers inside a Javascript loop - need a closure?

我可以继续，但是数以亿计是一个很大的数字...