看闭包的时候,有这么一道例子:使用闭包解决 "var" 定义函数的问题
for (var i = 1; i <= 5; i++) {
setTimeout(function timer() {
console.log(i)
}, i * 1000)
}
首先因为 setTimeout
是个异步函数,所以会先把循环全部执行完毕,这时候 i
就是 6 了,所以会输出一堆 6。
解决办法有三种,第一种是使用闭包的方式
for (var i = 1; i <= 5; i++) {
;(function(j) {
setTimeout(function timer() {
console.log(j)
}, j * 1000)
})(i)
}
在上述代码中,我们首先使用了立即执行函数将 i
传入函数内部,这个时候值就被固定在了参数 j
上面不会改变,当下次执行 timer
这个闭包的时候,就可以使用外部函数的变量 j
,从而达到目的。
第二种就是使用 setTimeout
的第三个参数,这个参数会被当成 timer
函数的参数传入。这个匿名函数的作用域有点类似类的属性,是可以被内层方法使用的。
for (var i = 1; i <= 5; i++) {
setTimeout(
function timer(j) {
console.log(j)
},
i * 1000,
i
)
}
第三种就是使用 let
定义 i
了来解决问题了,这个也是最为推荐的方式
for (let i = 1; i <= 5; i++) {
setTimeout(function timer() {
console.log(i)
}, i * 1000)
}
第三种方法有些迷,为什么换成 "let" 就解决了?了解后才知道,第三种和第二种方法从原理上没什么区别,这两种方法都不是解决异步问题的,而是解决变量作用域的问题的。
因为函数timer()属于一个新的域,通过var定义的变量是无法传入到这个函数执行域中的,通过使用let来声明块变量,这个变量就能作用于这个块,所以timer()就能使用 i 这个变量了。