let和var的区别以及let的“变量绑定”特性

今天做功能时碰到一个问题，先列代码：

arr.forEach(function(data){
    var field = data.field
    var up_field = data.up_field
    $(document).on('change', "input[name='" + field + "']", function () {
    $("input[name='" + up_filed + "']").val('');
});
})

大体功能就是上级input内容变化就会清空下级input内容；

结果改完之后发现代码死活不生效，无奈只好使用debugger一步一步检查，发现上面的up_field变量无论在那个循环里都是一个值，也就是arr数组的最后一个元素的up_field参数，后来换成了let就好了，原因是var是全局作用域，let是块级作用域，let只会在声明自己的代码块里生效，并且有一个变量绑定的特性，会将自己当前的值绑定到使用自己的函数里面去。

找了个例子：

var a = [];for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

由于i是全局作用域，所以a[6]执行的时候会去全局寻找i变量并将其打印出来，i在循环完毕后的值是10，所以打印出来的值是10，在看下一个例子：

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

这里由于i是局部作用域，所以a[6]里的i在声明时候就会将当前let声明的i绑定到函数里（没法去全局里找），所以打印出来的就是当时绑定的i值。