JavaScript循环和作用域

JavaScript有一个特点，也许会让开发者头痛, 是与循环和作用域相关的.

举个例子:

const operations = []

for (var i = 0; i < 5; i++) {

operations.push(() => {

console.log(i)

})

}

for (const operation of operations) {

operation()

}

它基本是循环了5次，将一个函数增加到operations数组里面。这个函数可打印出循环变量索引值i.

运行这些函数后

期望的结果应该是:

0

1

2

3

4

但实际发生的是这样的:

5

5

5

5

5

为什么会有这种情况? 由于使用的是var.

这里还是要推荐下小编的web前台学习群:867726593，不论你是小白还是大牛，小编我都欢迎，不定期分享干货，包括小编自己整理的一份最新的web前台资料和0基础入门教程，欢迎初学和进阶中的小伙伴。在不忙的时间我会给大家解惑。

因为提升了var变量, 上面的代码等同于

var i;

const operations = []

for (i = 0; i < 5; i++) {

operations.push(() => {

console.log(i)

})

}

for (const operation of operations) {

operation()

}

因而，在for-of循环中, i 仍然是可见的, 它等于5，并且每次在函数中涉及到i ,都将使用这个值。

那么我们应该如何做让其变成我们想的这样呢?

最简单的方案是用 let 公告. 在ES2015中详情到, 它们有很大的帮助，能避免关于使用var公告的少量奇怪问题。

简单的在循环变量时将var 变成 let ,能够很好的运行：

const operations = []

for (let i = 0; i < 5; i++) {

operations.push(() => {

console.log(i)

})

}

for (const operation of operations) {

operation()

}

这是输出结果:

0

1

2

3

4

这是怎样实现的呢?这是由于每次循环重复的时候，都将重新创造 i ,同时每个函数增加operations数组时，能获取它本身的i。

记住你不能使用 const在这种情况下, 由于这会导致for在第二次循环时， 尝试赋新值报错。

另外一个非常普遍的处理这个问题是使用pre-ES6代码, 同时它被称作即时调用函数表达式?(IIFE).

在这种情况下，你可以包装整个函数，并将i 绑定在它上面。自这种方式，你正在创造一个能立即执行的函数，你从其返回的一个新的函数。因而我们可以稍后执行它。

const operations = []

for (var i = 0; i < 5; i++) {

operations.push(((j) => {

return () => console.log(j)

})(i))

}

for (const operation of operations) {

operation()

}