js预解析及案例分析

一、预解析

• JavaScript解析器执行JavaScript代码的时候，分为两个过程：预解析过程和代码执行过程。
• 预解析过程：
  • 把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。
  • 把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用。
• 变量提升：定义变量的时候，变量的声明会被提升到作用域的最上面，变量的赋值不会提升。
• 函数提升：JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的最前面。

二、案例分析

• 案例1：

 //------原始代码------------
 	var a = 25;
 	function abc() {
    	alert(a); 
    	var a = 10;
  	}
 	abc();
 //------解析过程------------
 	 var a;
     function abc() {
       // 局部作用域  预解析
       var a;
       alert(a); 
       a = 10;
     }
     a = 25;
     abc();

• 案例2：

//----------原始代码------------
    console.log(a);
    function a() {
      console.log('aaaaa');
    }
    var a = 1;
    console.log(a);
//------------解析过程-------------
    //在预解析的过程中如果函数和变量的名字相同，此时函数优先
    var a;
    function a() {
      console.log('aaaaa');
    }

    console.log(a);
    a = 1;
    console.log(a);

• 案例3

//----------原始代码------------
     var a = 18;
     f1();
     function f1() {
       var b = 9;
       console.log(a);
       console.log(b);
       var a = '123';
     }
//-----------解析过程------------
     var a;
     function f1() {
       var b;
       var a;
       b = 9;
       console.log(a);
       console.log(b);
       a = '123';
     }

     a = 18;
     f1();

• 案例4

//------------原始代码-------
	 f1();
	 console.log(c);
     console.log(b);
     console.log(a);
    function f1() {
      var  a = b = c = 9;
      console.log(a);
      console.log(b);
      console.log(c);
    }
//------------解析过程---------------
    function f1() {
      var a;
      a = b = c = 9;
      console.log(a);
      console.log(b);
      console.log(c);
    }
    f1();
    console.log(c);  //9
    console.log(b);  //9
    console.log(a);  //报错 not defined，因为a是局部变量
   ----------------------------------- 
     var a = b = c = 9;这句代码解析为：
     var a = 9;   //局部变量
     //全局变量
       b = 9
       c = 9;