JavaScript预解析介绍（变量提升、函数提升）

目录

一、预解析介绍

二、预解析分类

预解析分为 变量预解析 和 函数预解析

三、预解析案例分析 

1、简单函数提升

2、预解析案例

1、变量提升

2、双输出预解析，变量寻值遵循就近原则

 3、函数提升预解析

 4、多赋值变量提升

一、预解析介绍

js引擎运行js分为两步：

js引擎运行js分为两步：

1、预解析

2、代码执行

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

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

JavaScript 是 轻量级 解释型 弱类型 脚本语言

所谓的 预解析/预解释/预编译 是 JavaScript程序的一种执行方式 

二、预解析分类

预解析分为 变量预解析 和 函数预解析

变量预解析 也叫 变量提升

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

函数预解析 也叫 函数提升

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

三、预解析案例分析 

1、简单函数提升

// 1问
         console.log(num);

// 2问
        console.log(num); //undefined   坑1
        var num = 10;
        // 相当于执行了以下代码
        var num;
        console.log(num);
        var num = 10;


// 3问  （函数提升）
        fn();

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

// 4问
        fun(); //报错 坑2
        var fun = function() {
                console.log(22);

            }
            // 函数表达式 调用 必须写在函数表达式的下面
            // 相当于执行了以下代码
            var fun;
            fun();
            fun = function() {
               console.log(22);
             }


// 1.我们js引擎运行js分为两步： 预解析  代码执行
        // (1)预解析 js引擎会把js 里面所有的var 还有function 提升到当前作用域的最前面
        // (2)代码执行  按照代码书写的顺序从上往下执行
// 2.预解析分为 变量预解析（变量提升） 和 函数预解析（函数提升）
        // (1)变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作
        // (2)函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数

2、预解析案例

1、变量提升

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

        function fun() {
            console.log(num);
            var num = 20;
        }
        // 相当于执行了以下操作
        var num;
        function fun() {
            var num;
            console.log(num);
            num = 20;
        }
        num = 10;
        fun();

2、双输出预解析，变量寻值遵循就近原则

// 案例2   undefined，20
        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();

 3、函数提升预解析

// 案例3
        var a = 18;
        f1();

        function f1() {
            var b = 9;
            console.log(a);
            console.log(b);
            var a = 'abc';
        }
        // 相当于执行以下代码
        var a;

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

 4、多赋值变量提升

// 案例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;
            a = b = c = 9;
            // var a = b = c = 9;
            // 相当于 var a = 9; b = 9; c = 9;   b和c直接赋值 没有var声明 当全局变量看
            // 集体声明 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); //报错