阅读 106

JS函数执行机制

函数执行的时机不同,运行结果也不同

let i 
for(i = 0; i<6; i++){
  setTimeout(()=>{   
   console.log(i)   
  },0)
}  //6、6、6、6、6、6
复制代码

以上代码打印出的是 6 个 6 而非 0 1 2 3 4 5,这是因为 for 循环在主线程内,setTimeout 是异步方法,在任务队列里面,只有主线程执行完后,任务队列才执行,当 for 执行结束时候,此时的 i 值已经是 6,所以得此时 console.log 出的是 6 个 6。

for(let i = 0; i<6; i++){  
  setTimeout(()=>{    
   console.log(i) 
  },0) 
 }// 0、1、2、3、4、5
复制代码

let 只在代码块内才有效,let 只能声明一次。变量 i 是用 let 声明的,当前的 i 只在本轮循环中有效,每次循环的 i 其实都是一个新的变量,所以 setTimeout 定时器里面的 i,其实是不同的变量,即最后输出 0-5。每次循环的变量 i 都是重新声明的,通过 JavaScript 引擎内部记住前一个循环值,来知道前一个循环的值。

for(var i = 0; i<6; i++){  
  setTimeout(()=>{    
    console.log(i) 
  },0) 
 }// 6、6、6、6、6、6
复制代码

可能会疑惑为何以上代码和代码2 代码基本相同,不同的是一个是 var,一个是 let。因为同一作用域 let 只能声明一个同一变量名称的变量,他不得不通过调用栈把它们存起来,而 var 会直接覆盖。

文章分类
前端
文章标签