理解变量提升+setTimeout+暂时性死区

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。

例1

fun (){
  console.log(a)
  var a = 123;
},
//输出结果:undefined

以上函数实际上执行顺序如下：

fun(){
	var a;
	console.log(a)
	a = 123;
},
//输出结果:undefined

例2

fun(){
  var a = 99;       //全局变量a
  funA();           //调用funA函数，函数定义在后面，但是函数声明会提升到作用域顶部。
  console.log(a);   //=>99
  function funA(){  //funA函数声明
    console.log(a); //=>undefined。此处输出的a是下面的a变量提升之后的a。
    var a = 10;     //局部变量a
    console.log(a); //=>10
  }
},
//输出结果：
//undefined
//10
//99

调用setTimeout时，把函数参数，放到事件队列中，等主程序运行完，再调用。即便是时间值为0，它也会等主程序执行完再执行，如果主程序队列为空，就会直接调用。

例3

fun(){
   for(var i = 0;i < 10; i++){
     setTimeout(function (i) {//同步注册回调函数到异步的宏任务队列
       console.log(i);//执行此代码时，for循环已经执行完毕。
     },0);
   }
 },
 //输出结果：10个10
 //涉及知识点：JS循环机制、setTimeOut执行机制

例4

fun(){
   //i虽然在全局作用域声明，但是在for循环体作用域中使用的时候，变量会被固定，不会被外界干扰。
   for(let i = 0;i < 10; i++){
     setTimeout(function (i) { 
       console.log(i);// i是循环体内部局部作用域，不受外界影响。
     },0);
   }
 },
 //输出结果：0 1 2 3 4 5 6 7 8 9 
 //涉及知识点：JS循环机制、setTimeOut执行机制、let暂时性死区

例5

fun(){
 for(var i = 0;i < 10; i++){
     console.log(i);//  
     setTimeout(function (i) { 
       console.log(i);//  
     },1000);
   }
 },
 //输出结果： 
 //0 1 2 3 4 5 6 7 8 9 然后10个10
 //涉及知识点：JS循环机制、setTimeOut执行机制、let暂时性死区

例6

    fun5(){
      for(var i = 0;i < 10; i++){
        console.log(i);  
        setTimeout(function (i) { 
          console.log(i);
        },1000);
      }
      for(var i = 0;i < 3; i++){
        setTimeout(function (i) { 
          console.log(i);
        },1000);
        console.log(i);
      }
    },
    //输出结果： 
    //0 1 2 3 4 5 6 7 8 9 
    //0 1 2
    //3 3 3
    //3 3 3 3 3 3 3 3 3 3
    

标签：function,10,console,变量,暂时性,var,setTimeout,log
来源： https://blog.csdn.net/qq_37024887/article/details/104825625