var 在异步中引发的 bug

Posted 2020-09-28 Piers

问题复现

for (var i = 0; i < 10; i++) {
    $http.get("/uri").then(function(data)){
        mydata[i].data = data;
    }
}

报错：

unable to get property ‘mydata‘ of null

 

问题原因

第一步，听说 var 和 let 作用域范围不同，所以特定尝试下 let，看是否能解决这个 bug。

for (let i = 0; i < 10; i++) {
    $http.get("/uri").then(function(data)){
        mydata[i] = data;
    }
}

的确没有报错，解决了该 bug。

第二步，在 console 中输出 i 值：发现 var i 时，所有的 i 为 10；let i 时，i 分别为 1 2 3 4 5 6 7 8 9。

 

后来查阅资料弄清楚该 bug 的原因：

1. javascript 为单线程，异步操作是在所有操作是在主程序结束之后才开始运行。首先是提交所有的 AJAX 操作，其次才是分别执行所有的 AJAX 请求。
2. var 为全局变量，let 为块级变量。当 AJAX 操作执行时，var i 的 i 由于是全局变量已经变成了 10，自然越界了；let i 的 i 由于是块级变量，还保持块中的值，分别为 1 2 3 4 5 6 7 8 9，所以不会越界。

其实，这也是 let 产生的原因。