Js代码执行顺序(变量提升、setTimeout和Promise)

严格意义上来说，javascript没有多线程的概念，所有的程序都是单线程依次执行的。

1.什么是单线程？

　　　　通俗点说，就是代码在执行过程中，另一段代码想要执行就必须等当前代码执行完成后才可以进行。

 for(var i=1;i<=3;i++){
     setTimeout(function(){
         console.log(i); //输出：4,4,4
     },0)
 }

　　　　既然延时器时间设置为0，那么应该执行一遍循环就应该立即打印出一个i，但是最终的打印结果为：4，4，4。之所以会出现上面的结果，正是因为js代码是单线程应用。

　　　　在执行过程中，先遇到for循环，for循环先进入线程。当i=1时，循环走到setTimeOut后，此时的for循环还没有执行完成，setTimeOut就会被放入一个地方（线程池）等待执行。此时for循环继续执行，当i=2时，for循环仍没有执行完，这时的setTimeOut仍会被放在线程池中等待执行……依次类推，直到for循环转完3遍后，for循环执行完了，此时线程空闲了，在线程池中等待执行的setTimeOut依次执行打印i，而for循环执行完成后，i变成了4，所以打印出了三个4。

　　　　如果想要改变上面的状况可以运用以下代码:

//将var变为let
for(let i=1; i<=3; i++){
    setTimeOut(function(){
        console.log(i);  //输出的结果为1，2，3
    },0);
}
//用自执行函数进行包裹
for(var i=1; i<=3; i++){
    !function(i){
        setTimeOut(function(){
            console.log(i);  //输出的结果为1，2，3
        },0);
    }(i)
}

2.js中的函数作用域和代码的执行　　

　　　　在js语言中，没有类似于c语言这样的块级作用域。

　　　　js语言中的顶级作用域为window对象范围内，称为全局作用域，在全局作用域中声明的变量为全局变量。

　　　　js函数范围内的变量只能在函数内部使用，函数外部无法使用，这样的变量为局部变量。

　　　　js函数可以嵌套，多个函数的嵌套构成了作用域的层层嵌套，这称为js中的作用域链。

　　　　js作用域链变量访问规则：

　　　　　　（1）当前作用域内存在要访问的变量时，则使用当前作用域中的变量。

 　　　   　　（2）当前作用域中不存在要访问的变量时，则会到上一层作用域中寻找，直到全局作用域。

var a=1;  //声明了一个全局变量
function func(){
    console.log(a);  //输出：undefined。打印a，而在func这个作用域中已经声明了a变量，按照js的执行顺序，此时的a并未被赋值。
    var a=1;  //如果不定义a那就全都去找全局变量都是1
    console.log(a);  //输出：1。
}
func();

　　　　第一个a输出undefined。原因：js作用域链的访问规则，当前作用域内存在要访问的变量a，所以使用当前作用域中的变量。再根据js代码的执行顺序，此时的a只是声明了而并未被赋值，默认为undefined，所以输出undefined。

　　　　而第二个a，输出1，正是因为此时的a已经被声明且被赋值，所以a输出1。

例题一：

function test() {
	for (var i = 5; i < 100; i = i + 2) {

	}
//循环完事之后i=101
	console.log(i);
}
test();
执行结果   101

var person = function(){
    var name = "default";     
    return {   
      getName : function(){   
          return name;   
      },   
      setName : function(newName){   
          name = newName;   
      }   
    }   
}();    
console.log(person.name);    //underfined
console.log(person.getName());    //default
person.setName("abruzzi");   
console.log(person.getName());   //abruzzi

var x = 1234
function test(){
var x = 4567;
  console.log(this.x);
}
test();  //输出1234
var testObj = new test();  //输出undefined
var o = {};
o.x = 5678;
o.m = test;
o.m();   //输出4567　　

例题二：

a = 100;
   function demo(e){
       arguments[0]=2;
       function e(){}
       console.log(e);
       if(a){
           var b = 123;
       }
       a=10;
       var a;
       console.log(b);
       function c(){};
       var c;
       f =123;
       console.log(c);
   }
   var a ;
   demo(1);
   console.log(a);
   console.log(f);

//输出：2 undefined function c(){}  100   123

理解：1.if条件不成立时，{}里面的变量依旧会提升。
　　    2.函数提升优先级低于变量提升，且不会被同名变量声明时覆盖，但是会被变量赋值后覆盖（不会重复提升，但会重新赋值）

例题三：

setTimeout(function() {
console.log(1)
}, 0);
new Promise(function(resolve, reject) {
console.log(2)
for (var i = 0; i < 10000; i++) {
if(i === 10) {console.log(10)}
i == 9999 && resolve();
}
console.log(3)
}).then(function() {
console.log(4)
})
console.log(5);

输出答案：2 10  3 5 4 1

 理解：

1. 要先弄清楚settimeout（fun,0）何时执行，promise何时执行，then何时执行
2. settimeout这种异步操作的回调，只有主线程中没有执行任何同步代码的前提下，才会执行异步回调，而settimeout（fun,0）表示立刻执行，也就是用来改变任务的执行顺序，要求浏览器尽可能快的进行回调
3. promise何时执行，由上图可知promise新建后立即执行，所以promise构造函数里代码同步执行的，
4. then方法指向的回调将在当前脚本所有同步任务执行完成后执行，
5. 那么then为什么比settimeout执行的早呢，因为settimeout（fun,0）不是真的立即执行，
6. 经过测试得出结论：执行顺序为：同步执行的代码-》promise.then->settimeout