在循环内使用闭包(Closures)

简介: 在循环内使用闭包(Closures)

闭包的本质是一个内部函数访问其作用域之外的变量。闭包可以用于实现诸如 私有变量 和 创建工厂函数之类的东西。


我们可能经常会见到一段这样的代码:

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

运行上面的代码控制台会在1秒后打印4个4,而不是0,1,2,3。

其原因是因为setTimeout函数创建了一个可以访问其外部作用域的函数(也就是我们经常说的闭包),每个循环都包含了索引i。

1秒后,该函数被执行并且打印出i的值,其在循环结束时为4,因为它的循环周期经历了0,1,2,3,4,并且循环最终在4时停止。

下面列举两种方案解决这个问题:

for (var i = 0; i < 4; i++) {
  // 通过传递变量 i
  // 在每个函数中都可以获取到正确的索引
  setTimeout(function(j) {
    return function() {
      console.log(j);
    }
  }(i), 1000);
}
for (let i = 0; i < 4; i++) {
  // 使用ES6的let语法,它会创建一个新的绑定
  // 每个方法都是被单独调用的
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

目录
相关文章
|
12月前
|
存储 Swift
24 闭包和闭包表达式
闭包和闭包表达式
53 0
|
18天前
|
移动开发
浅谈H5闭包
浅谈H5闭包
|
2月前
|
存储 自然语言处理 JavaScript
闭包
闭包
10 0
|
3月前
|
语音技术 Python
语音识别,range语句,range语句=生成数字序列,for循环临时变量作用域,for循环临时变量作用域,for循环的变量作用域只能在for内部用,for循环的嵌套使用,for循环打印九九乘法表
语音识别,range语句,range语句=生成数字序列,for循环临时变量作用域,for循环临时变量作用域,for循环的变量作用域只能在for内部用,for循环的嵌套使用,for循环打印九九乘法表
|
12月前
|
JavaScript 前端开发
对闭包的理解以及使用
对闭包的理解以及使用
42 1
|
存储 缓存 前端开发
详解 Reat 中的闭包问题
JavaScript 中的闭包一定是最可怕的特性之一。 即使是无所不知的 ChatGPT 也会告诉你这一点。 它也可能是最隐秘的语言概念之一。 每次编写任何 React 代码时,我们都会用到它,大多数时候我们甚至没有意识到。 但最终还是无法摆脱它们:如果我们想编写复杂且高性能的 React 应用程序,我们就必须了解闭包。
97 0
详解 Reat 中的闭包问题
|
存储 JavaScript
为什么我要说:柯里化 == 闭包+递归?
柯里化是 JS 高程中不可或缺的重心,本篇带你来冲一冲它!!
|
XML Java 数据格式
【Lua基础 第3章】变量、赋值语句、索引、lua中的循环、循环控制语句
lua 中的变量、赋值语句、索引、lua中的循环、循环控制语句
151 0
【Lua基础 第3章】变量、赋值语句、索引、lua中的循环、循环控制语句
闭包的使用
闭包的使用
67 0
|
自然语言处理 JavaScript
你真的懂闭包么?
前言 本文主要总结一下 到目前为止对闭包的理解. 好几年之前学习闭包的时候模模糊糊,看了网上的一些帖子,理解为:函数内部可以使用函数外部的变量,后面看了你所不知道的JS,以为自己懂了,后面面试的时候又感觉自己不懂了,而今感觉自己真正懂了==,特此记录一下。
126 0