JS函数的执行时机

163 阅读1分钟

Example 1

let a = 1
function fn(){
    console.log(a)
}

仅声明函数,并未执行,不会打印

Example 2

let a = 1
function fn(){
    console.log(a)
}
a = 2
fn() // 2

函数调用之前,a被再次赋值为2,所以打印2

异步执行的情况

Example 1

let a = 1
function fn(){
    setTimeout(()=>{
        console.log(a)
    },0)
}
fn() // 2
a = 2

setTimeout会等到当前代码执行完毕后,再执行,即执行完let a= 1, fn(), a=2之后,再执行console.log(a)

Example 2

for(var i = 0; i<6; i++){
    setTimeout(()=>{
        console.log(i)
    },0)
}
//会打印出6个6

Example 3

let i = 0
for(i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}

这两个例子执行结果都是6个6。
原理是:setTimeout会等到当前代码的for循环执行完了,再去执行console.log(i) 而for循环执行完之后,i已经是6了 所以会打印出6个6

Example 4

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

在for循环中使用let,会单独创建一个作用域,循环6次,相当于有6个i(从0-5),分别执行计时器函数,因此会打印0,1,2,3,4,5

利用立即执行函数

let i = 0
for(i = 0; i < 6; i++) {
  !function(j){setTimeout(() => {
    console.log(j)
  }, 0)}(i)
}

定义一个立即执行函数,并将i作为参数传递,这样也能输出0-5