JS函数的执行时机

162 阅读1分钟

调用时机

这个概念在函数中是十分重要的,要理解一句话:声明函数时,其中的变量的值是不确定的,因为我们并没有调用它,调用它的时候这个变量是什么值不确定。

例如

var a = 1;
function show(){
    console.log(a)
}

console.log出什么值?

  • 错误答案: 1
  • 原因:函数show声明之后并没有调用,如果a的值更改,再调用show,那么就 !== 1
var a = 1;
function show(){
    console.log(a)
}

a = 3;
show()//打印3

通过setTimeout函数理解调用时机

for(var i=0;i<6;i++){
    setTimeout(()=>{
        console.log(i)
    },0)
}// 输出: 6 6 6 6 6 6 

为何会出现这样的情况?

是因为setTimeout是异步函数,等待当前语句执行结束后才执行setTimeout中的函数,当for循环结束后,i的值是6,所以会打印出来6个6

那么如何打印出来0 1 2 3 4 5

方法一:let和for结合

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

原因:let声明方式有其特殊性,会打印出来0 1 2 3 4 5

方法二:使用闭包

var j = 0;
function sticky(){
console.log(j);
j++;
}
 
for(var i = 0; i < 6; i++ ){
setTimeout(sticky,0)
}// 0 1 2 3 4 5 

原因:此时抛弃i变量输出,因为i此时为6,无法满足我们的要求,我们采用闭包的方式,通过递增变量j,调用6次sticky函数,从而打印出0 1 2 3 4 5。