JavaScript 如何使用闭包

最新推荐文章于 2022-09-09 15:26:09 发布

weixin_34402408

最新推荐文章于 2022-09-09 15:26:09 发布

阅读量67

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000018344949

本文深入探讨了闭包的概念，解释了为何在循环中直接使用setTimeout会导致错误的输出，并提供了两种正确的实现方式，确保定时器能够按预期显示数组元素的索引。

闭包基本上是内部函数可以访问其范围之外的变量，可用于实现隐私和创建函数工厂

定义一个数组，循环遍历这个数组并在延迟3秒后打印每个元素的索引

先看一个不正确的写法：

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
  setTimeout(function() {
    alert('The index of this number is: ' + i);
    console.log('The index of this number is: ' + i);
  }, 3000);
}

看下执行效果：

如上图：3秒后每次都是打印4，而不是0，1，2，3。

原因：因为setTimeout函数创建的是一个可以访问其外部作用域的函数（闭包），该作用域包含索引i的循环。经过3秒后，i的值已经变为4。

正确的写法：
写法一：

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
  setTimeout(function(i_local){
    return function () {
      alert('The index of this number is: ' + i_local);
      console.log('The index of this number is: ' + i_local);
    }
  }(i), 3000)
}

写法二：

const arr = [10, 12, 15, 21];
for (let i = 0; i < arr.length; i++) {
  setTimeout(function() {
    alert('The index of this number is: ' + i);
    console.log('The index of this number is: ' + i);
  }, 3000);
}