09.JavaScript 預解析

一.預解析

1.1 引入問題

console.log(num);  // 結(jié)果是多少朝群？

console.log(num);  // 結(jié)果是多少儿子？
var num = 10;   互拾？

fn();
function fn() {
    console.log('打印');
}

fn();
var  fn = function() {
    console.log('想不到吧');
}

1.2 預解析

JavaScript 代碼是由瀏覽器中的 JavaScript 解析器來執(zhí)行的。JavaScript 解析器在運行 JavaScript 代碼的時候分為兩步：==預解析和代碼執(zhí)行钠绍。==

預解析：在當前作用域下, JS 代碼執(zhí)行之前，==瀏覽器會默認把帶有 var 和 function 聲明的變量在內(nèi)存中進行提前聲明或者定義。==
代碼執(zhí)行： ==從上到下執(zhí)行JS語句溯祸。==

預解析只會發(fā)生在通過 var 定義的變量和 function 上。學習預解析能夠讓我們知道為什么在變量聲明之前訪問變量的值是 undefined舞肆，為什么在函數(shù)聲明之前就可以調(diào)用函數(shù)焦辅。

二.變量預解析和函數(shù)預解析

2.1 變量預解析（變量提升）

預解析也叫做變量、函數(shù)提升椿胯。

變量提升： ==變量的聲明會被提升到當前作用域的最上面筷登，變量的賦值不會提升。==

問題二：

//問題二：
//console.log(num); // 結(jié)果是多少哩盲？undefined
    //var num = 10; // 前方？

    //變量預解析后執(zhí)行過程
    var num;
    console.log(num); //undefined
    num = 10;

問題四：函數(shù)表達式的聲明必須寫在函數(shù)調(diào)用之前

//問題四：
    func(); //Uncaught TypeError: func is not a function

    var func = function () {
      console.log(22);
    }

    //變量提升執(zhí)行過程
    var func;
    func();
    func = function () {
      console.log(22); //Uncaught TypeError: func is not a function
    }

2.2 函數(shù)預解析（函數(shù)提升）

函數(shù)提升：==函數(shù)的聲明會被提升到當前作用域的最上面，但是不會調(diào)用函數(shù)==

 //問題三：
    fn();

    function fn() {
      console.log(11); //11
    }

    //函數(shù)提升執(zhí)行過程
    function fn() {
      console.log(11); //11
    }
    fn();

三.預解析案例

3.1 案例一：

 // 案例1
    var num = 10;
    fun();

    function fun() {
      console.log(num);
      var num = 20;
    }

解析過程：先全局變量廉油，再局部變量

 //解析過程:先全局變量惠险，再局部變量
    var num;

    function fun() {
      var num;
      console.log(num); //undefined
      num = 20;
    }
    num = 10;
    func();

3.2 案例二

// 案例2
var num = 10;
function fn(){
    console.log(num);
    var num = 20;
    console.log(num);
} 
fn();

執(zhí)行過程：

//執(zhí)行過程
    var num;

    function fn() {
      var num;
      console.log(num); //undefined
      num = 20;
      console.log(num); //20
    }
    num = 10;
    fn();

3.3 案例三

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

3.4 案例四:前端面試題

    var num = 10;

    function fn() {
      console.log(num);
    }
    fn(); */
    // 案例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);
     }