JavaScript知识点整理（九）- 预解析

目录

一、预解析

1.1 变量提升

1.2 函数提升

二、预解析案例

2.1 案例1 输出结果是什么

2.2 案例2 输出结果是什么

2.3 案例3 输出结果什么

 2.4 案例4 输出结果是什么

---

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

一、预解析

预解析：JS引擎会把JS里面所有的var还有function提升到当前作用域最前面

代码执行：按照代码书写顺序从上往下执行

预解析分为变量解析（变量提升）和函数解析（函数提升）

1.1 变量提升

变量提升：就是把所有的变量声明提升到当前的作用域最前面，不提升赋值操作

1.2 函数提升

就是把所有的函数声明提升到当前作用域得最前面，不调用函数

二、预解析案例

2.1 案例1 输出结果是什么

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

案例分析

    // 相当于执行了以下操作
    var num;

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

• 依据作用域链 判断num赋值，可得知console.log(num) 内的 num 没有赋值，所以输出结果为undefined

2.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);
        num = 20;
        console.log(num);
    }
    num = 10;
    fn();

• 输出结果为
• undefined
• 20

2.3 案例3 输出结果什么

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

    //原代码相当于按该代码来执行
    var a;
    function fn1(){
        var b;
        var a;
        b=9
        console.log(a);
        console.log(b);
        a = '123';
    }
    a = 18;
    fn1();

• 输出结果为
• undefined
• 9

 2.4 案例4 输出结果是什么

    fn1();
    console.log(c);
    console.log(b);
    console.log(a);

    function fn1() {
        var a = b = c = 9;
        console.log(a);
        console.log(b);
        console.log(c);
    }

案例分析

    //原代码相当于按该代码来执行
    function fn1() {
        var a;
        a = b = c = 9;
        // 相当于 var a = 9; b = 9; c = 9; b和c 直接赋值，没有var声明，相当于全局变量
        console.log(a);
        console.log(b);
        console.log(c);
    }
    fn1();
    console.log(c);
    console.log(b);
    console.log(a);

• 输出结果为
• 9
• 9
• 9
• 9
• 9
• 报错