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 也可以解决问题，求各位大神告知！