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;
    };