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;