第一章：预解析
- 1.1 引入
- 1.2 预解析
第二章：变量预解析和函数预解析
- 2.1 变量预解析（变量提升）
- 2.2 函数预解析（函数提升）
第三章：预解析案例

第一章：预解析

1.1 引入

问：console.log(num);
答：报错，num is not defined。
问：console.log(num); var num = 10;
答：undefined。
问：fn();function fn(){console.log('打印')}
答：打印。
问：fn();var fn = function(){console.log('打印')}
答：报错，fn is not a function。

1.2 预解析

JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步：预解析和代码执行。
- 预解析：在当前作用域下，JS代码执行之前，浏览器会默认把带有var和function声明的变量在内存中进行提前声明或定义。
- 代码执行：从上到下执行JS语句。
预解析只会发生在通过var定义的变量和function上。学习预解析能够让我们知道为什么在变量声明之前访问变量的值是undefined，为什么在函数声明之前就可以调用函数。

第二章：变量预解析和函数预解析

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

预解析也叫做变量、函数提升。
变量提升：变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。
示例：

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

上面的代码相当于：

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

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

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

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

上面的代码相当于：

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

示例：

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

上面的代码相当于：

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

第三章：预解析案例

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预解析案例1</title>
    <script>
        var num = 10;
        fun();

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

        /* ----------相当于-------------*/
        /*
        var num;

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

        num = 10;
        fun();
        */

    </script>
</head>

<body>

</body>

</html>

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预解析案例2</title>
    <script>
        var num = 10;

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

        /* ----------相当于-------------*/

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

    </script>
</head>

<body>

</body>

</html>

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预解析案例3</title>
    <script>
        var a = 18;
        f1();

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

        /* ----------相当于-------------*/
        /*
        var a ;
        function f1(){
            var b ;
            var a ;
            b = 9;
            console.log(a);
            console.log(b);

            a = '123';
        }
        a = 18;
        f1();
        */

    </script>
</head>

<body>

</body>

</html>

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预解析案例4</title>
    <script>
        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);
        }

        /*
        * 结果：
        * 9
        * 9
        * 9
        * 9
        * 9
        * 报错，a is not defined
        */

        /* ----------相当于-------------*/
        // function f1() {
        //     // var a = b = c = 9;
        //     //相当于var a=9;b=9;c=9;
        //     var a;
        //     a = 9;
        //     b = 9;
        //     c = 9;
        //     console.log(a);
        //     console.log(b);
        //     console.log(c);
        // }
        //
        // f1();
        // console.log(c);
        // console.log(b);
        // console.log(a);

    </script>
</head>

<body>

</body>

</html>