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值。

本文 暂无 评论

Top
Music