问题复现
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 的原因:
- JavaScript 为单线程,异步操作是在所有操作是在主程序结束之后才开始运行。首先是提交所有的 AJAX 操作,其次才是分别执行所有的 AJAX 请求。
- var 为全局变量,let 为块级变量。当 AJAX 操作执行时,var i 的 i 由于是全局变量已经变成了 10,自然越界了;let i 的 i 由于是块级变量,还保持块中的值,分别为 1 2 3 4 5 6 7 8 9,所以不会越界。
其实,这也是 let 产生的原因。
时间: 2024-10-10 10:59:31