09.JavaScript 预解析

一.预解析

1.1 引入问题

console.log(num);  // 结果是多少？

console.log(num);  // 结果是多少？
var num = 10;   ？

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

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

1.2 预解析

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：==预解析和代码执行。==

• **预解析：**在当前作用域下, JS 代码执行之前，==浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。==
• 代码执行： ==从上到下执行JS语句。==

预解析只会发生在通过 var 定义的变量和 function 上。学习预解析能够让我们知道为什么在变量声明之前访问变量的值是 undefined，为什么在函数声明之前就可以调用函数。

二.变量预解析和函数预解析

2.1 变量预解析（变量提升）

预解析也叫做变量、函数提升。

变量提升： ==变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。==

• 问题二：

//问题二：
//console.log(num); // 结果是多少？undefined
    //var num = 10; // ？

    //变量预解析后执行过程
    var num;
    console.log(num); //undefined
    num = 10;

• 问题四：函数表达式的声明必须写在函数调用之前

//问题四：
    func(); //Uncaught TypeError: func is not a function

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

    //变量提升执行过程
    var func;
    func();
    func = function () {
      console.log(22); //Uncaught TypeError: func is not a function
    }

2.2 函数预解析（函数提升）

函数提升：==函数的声明会被提升到当前作用域的最上面，但是不会调用函数==

 //问题三：
    fn();

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

    //函数提升执行过程
    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();

执行过程：

//执行过程
    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);
     } 

解析过程：

//执行过程
    function f1() {
      /* 
      var a = b = c = 9;相当于
      var a=9;b=9;c=9;a为局部变量，而b,c是全局变量
      */
      //var a = b = c = 9;
      var 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); // Uncaught ReferenceError: a is not defined