Javascript let 关键字问题求解

写了这样一段代码：

这段代码的目的是使用循环为多个元素帮点点击事件，但是测试发现并没有按照预想的那样正确的为元素绑定事件。

后来发现回调函数中的变量 i 的颜色和其他 i 的颜色不同，鼠标悬浮在该 i 上，IDEA 提示如下：

Mutable variable is accessible from closure.

我知道这是循环和异步调用的经典问题，可以通过闭包来解决，修改代码如下：

function clickImageIcon(msgArr, options) { for (var i = 0; i < msgArr.length; i ++) { (function(index) { $('.file-wrapper:eq(' + index + ')').bind('click', function () { recognitionContent(msgArr[index]); $('#myModal').modal(options); }); })(i); } } 

但是在 Stack Overflow 上有人提出用 let 代替 var 也可以解决这个问题，代码如下：

function clickImageIcon(msgArr, options) { for (let i = 0; i < msgArr.length; i ++) { $('.file-wrapper:eq(' + i + ')').bind('click', function () { recognitionContent(msgArr[i]); $('#myModal').modal(options); }); } } 

我想知道为什么换成 let 也可以解决问题，求各位大神告知！