解决 ES6 中闭包内循环变量使用的问题

在 ES6 中，使用闭包内部变量的时候，经常会遇到循环变量的问题。比如下面的代码：

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i)
  }, 1000)  
}

输出结果：

5
5
5
5
5

本文将介绍如何使用 ES6 的 let 关键字解决这个问题，以及其他方法的对比和优缺点。

问题的原因

在上面的代码中，我们使用了循环变量 i，它虽然在每个 setTimeout 函数中都被调用了，但是它的值始终是 5，因为 setTimeout 函数是异步执行的。

当循环结束后，i 的值为 5，因此每个 setTimeout 函数执行时打印的都是 5。

解决方案

方法一：使用 let

使用 let 可以在每次循环时声明一个新的 i，这样就不会有上述问题了。

for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i)
  }, 1000)  
}

输出结果：

0
1
2
3
4

每个 setTimeout 函数都打印了对应的值，而不是都是 5。

方法二：使用闭包

另外一个改变 i 的作用域的方法是使用闭包：

for (var i = 0; i < 5; i++) {
  (function(i) {
    setTimeout(function() {
      console.log(i)
    }, 1000)  
  })(i)
}

这个方法和 let 关键字的效果一样，输出结果也是 0，1，2，3，4。

方法三：使用 ES6 箭头函数

ES6 箭头函数有一个特点：它的 this 关键字指向的是定义时所在的对象，而不是执行时对象。我们可以利用这一点来解决循环变量的问题。

for (var i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i)
  }, 1000)  
}

输出结果还是 0，1，2，3，4。

总结

让循环变量在闭包中正确执行的方法有很多，本文介绍了三种：使用 let，使用闭包，以及使用箭头函数。

使用 let 是最简单的方法，也是最容易理解的。它的缺点是它不能在循环外被访问，而且不是所有的浏览器都支持 let 关键字。

使用闭包的方法稍微复杂一点，但是比较稳定，适用于所有的浏览器。

使用箭头函数可以简化代码，但是和闭包方法一样，也只适用于支持 ES6 的浏览器。

无论使用哪种方法，理解其中的原理和差异有助于我们更好地利用闭包和函数作用域来编写 JavaScript 应用程序。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64780b59968c7c53b0450f75