JS基礎語法---預解析

1. 預解析做什麼事?

• 把變數的聲明提前了----提前到當前所在的作用域的最上面
• 函數的聲明也會被提前---提前到當前所在的作用域的最上面

    function f1() {
      console.log(num);
      var num = 10;
    }
    f1(); //此時運行結果是undefined

此時運行結果是undefined，因為預解析，變數聲明被提前了，實際按下麵的方式解析的：

    function f1() {
      var num
      console.log(num);
      num = 10;
    }
    f1(); //此時運行結果是undefined

舉例2：

    //函數調用的時候,把會函數的聲明提升到作用域的上面
    f1();//調用
    var num = 20;//這個變數的聲明會提升到變數使用之前
    function f1() {
      console.log(num);
      //var num=10;
    }

2. 預解析分段和局部作用域的問題

•     預解析中,變數的提升,只會在當前的作用域中提升,提前到當前的作用域的最上面
•     函數中的變數只會提前到函數的作用域中的最前面,不會出去

    function f1() {

      console.log(num);//undefined
      var num = 10;
    }
    f1();
    console.log(num);//報錯

•     預解析會分段(多對的script標簽中函數重名,預解析的時候不會衝突)

  <script>

    function f1() {
      console.log("哈哈");
    }

  </script>
  <script>
    f1();
    function f1() {
      console.log("嘎嘎");
    }
  </script>

3. 快速識別預解析的結果

 練習1：

    var a = 25;
    function abc() {
      alert(a);//undefined
      var a = 10;
    }
    abc();
    console.log(a);//25

練習2：

    console.log(a);
    function a() {
      console.log('aaaaa');
    }
    var a = 1;
    console.log(a);//1

預解析下的代碼解讀：

（變數聲明在最上面，下麵是函數聲明）

    var a;
    function a() {
      console.log('aaaaa');
    }
    console.log(a); //此時輸出的是函數a的代碼
    a = 1;
    console.log(a);//1

代碼結果：

練習3：

    var a = 18;
    f1();
    function f1() {
      var b = 9;
      console.log(a);//undefined
      console.log(b);//9
      var a = '123';
    }

預解析下的代碼解讀：

   var a;
   a = 18;
   function f1() {
     var b;
     var a;
     b = 9;
     console.log(a);//undefined
     console.log(b);//9
    a = '123';
   }
   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);
    }

預解析下的代碼解讀：

recap：

隱式全局變數: 聲明的變數沒有var,  就叫隱式全局變數

局部變數: 在函數內部定義的變數,是局部變數, 外面不能使用

   function f1() {
     var a;//局部變數
     a=9;
     //隱式全局變數
     b=9;
     c=9;
     console.log(a);//9
     console.log(b);//9
     console.log(c);//9
   }
   f1();
   console.log(c);//  9
   console.log(b);// 9
   console.log(a);//報錯

代碼結果：

 練習4：

    f1();//-----報錯
    var f1 = function () {
      console.log(a);
      var a = 10;
    };

預解析下的代碼解讀：

    var f1;
    f1();//-----報錯，不能調用，因為下的f1是賦值的表達式
    f1 = function () {
      console.log(a); //f1報錯，這裡就沒有結果啦
      var a = 10;
    };