一文讲清楚for循环内的块级作用域和闭包原理

前言

大家好,for循环应该是老生常谈的问题了,但我今天还是想再回顾一下,探索其中原理的同时,也能学到一些有用的知识。下文将通过局部变量、块级作用域、闭包三种方式来展示哪种方法可以解决for循环存在的缺陷,并且说明为什么 不能解决以及为什么 能解决,并且会演示在浏览器中如何进行打断点及如何查看代码运行生成的局部变量、块级作用域以及闭包

关键词: for循环、局部变量、块级作用域、闭包

for循环探索

for循环使用var声明变量的缺陷

js 复制代码
for(var i = 0; i <= 2; i++) {
  setTimeout(() => {
    console.log(i) // 打印三次3
  }, 1000 * i)
}

执行后,会每秒打印一个3,这是因为在延时器回调函数执行前,for循环已经结束,这时i=3

而延时器的回调函数在没有执行前,并不知道i的具体值是什么,始终保留的是对i的引用。

当回调函数执行时,去读取i的值,这是发现i已经是3了,所以打印结果为三次3

创建局部变量探索

js 复制代码
for(var i = 0; i <= 2; i++) {
  var cb = () => {
    const j = i  // 每次循环保存i的值
    console.log(j) // 打印三次3
  }
  setTimeout(cb, 1000 * i)
}

我们在浏览器的sources标签下打开运行的代码文件,在22行处打了个断点,运行后可以看到右边ScopeLocal下可看到局部变量j始终是3,由于没有形成Closure(闭包),所以回调函数里给j赋值的i始终是引用回调函数执行时i的具体值,也就是循环结束后i的值,所以并没有真正解决问题。

每次循环重新var声明变量

js 复制代码
for(var i = 0; i <= 2; i++) {
  var j = i
  setTimeout(() => {
    console.log(j) // 打印三次2
  }, 1000 * j)
}
console.log(j) // 2

for循环处声明的var变量相对于声明在全局作用域window.j(确切来说是在for循环外的作用域),每次循环只是简单的赋值,并不用解决问题。

使用let创建块作用域

js 复制代码
for(var i = 0; i < 3; i++) {
  // let隐式声明块级作用域
  let j = i
  setTimeout(() => {
    console.log(j) // 0,1,2
  }, 1000 * i)
  // 等价于let显示声明块级作用域
  // {
  //   let j = i
  //   setTimeout(() => {
  //     console.log(j) // 0,1,2
  //   }, 1000 * i)
  // }
}

Scope下可以看到形成了一个块级作用域,下面保存着j变量。每次执行会分别打印0,1,2,所以通过块级作用域可以解决for循环的缺陷。

使用let创建块作用域(简写版)

js 复制代码
for(let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i) // 0,1,2
  }, 1000 * i)
}

使用IIFE(立即执行函数)创建闭包

js 复制代码
for(var i = 0; i < 3; i++) {
  (function(j){
    console.log(i)  // 0,1,2
  })(i)
}

相当于每次执行循环都会创建一个闭包j保留着对当次循环的i的具体值的引用。

Scope(作用域)下的Closure(闭包)处可看到j形成了闭包。

所以通过闭包也能解决问题。

总结

解决for循环缺陷的方法可以使用let块级作用域 或者闭包 的方式。注意 区分局部作用域块级作用域是不同的概念,局部变量并不能真正解决问题。

往期文章回顾

uniapp实现背景颜色跟随图片主题色变化(多端兼容)

一文学会请求中断、请求重发、请求排队、请求并发

table表格自适应浏览器窗口变化解决方案

一文学会vue3如何自定义hook钩子函数和封装组件

相关推荐
江城开朗的豌豆几秒前
Vue3 数据绑定的进化:为什么Proxy取代了defineProperty
前端·javascript·vue.js
DoraBigHead6 分钟前
闭包全解与 V8 深潜
前端·javascript·面试
然我8 分钟前
浏览器是如何 “多开” 的?从进程到线程,拆解浏览器的并发逻辑
前端·javascript·面试
山河木马14 分钟前
前端学C++可太简单了:引用
前端·javascript·c++
江城开朗的豌豆16 分钟前
Vue 祖孙组件通信:3种实用方案,轻松搞定跨代传值!
前端·javascript·vue.js
独立开阀者_FwtCoder16 分钟前
Nginx 正式拥抱现代 JavaScript
前端·javascript·架构
独立开阀者_FwtCoder17 分钟前
Vue3 开发新选择:又一 Hooks 神库开源!
前端·javascript·vue.js
江城开朗的豌豆22 分钟前
Vue项目多代理配置指南:轻松搞定跨域请求分流!
前端·javascript·vue.js
全宝24 分钟前
🚀 一文搞定 claude code:国内环境下的安装、配置与体验
前端·ai编程·claude
寻觅~流光29 分钟前
封装---优化try..catch错误处理方式
开发语言·前端·javascript·typescript