当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript预解析,你懂了吗？

JavaScript预解析,你懂了吗？

2020年07月17日  | 移动技术网IT编程  | 我要评论

JS引擎（解释器）：运行js分为两步：
1、预解析
2、代码运行

预解析： JS引擎会把JS里面所有的var还有function提升到当前作用域的最前面
代码运行： 按照代码书写顺序从上往下逐行执行

预解析分为变量预解析（变量提升）和函数预解析（函数提升）
（1）变量提升：就是把所有的变量声明提升到当前作用域的最前面，不提升赋值操作
（2）函数提升：就是把所有的函数声明提升到当前作用域的最前面，不调用函数

问题引入及执行过程：

    <script>
        // 1问
        console.log(num); //显示num 未定义

        // 2问
        console.log(num);
        var num = 10; // undefined 坑 1
        // 相当于执行了以下代码
        var num;
        console.log(num);
        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);
        }
    </script>

案例：案例四为经典面试案例

<script>
        //案例一：
        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;
        fun();
        
        //案例二：
        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();

        //案例三：
        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();

        //案例四
        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 声明 当全局变量看
            console.log(a); //9
            console.log(b); //9
            console.log(c); //9
        }
        f1();
        console.log(c); //9
        console.log(b);//9
        console.log(a);// 没有被定义 会报错 (因为外部没有声明a)
    </script>

想要明白为什么会输出这样的结果，前提是要知道：

  • 变量只声明不赋值是 undefined
  • 函数内部有变量不声明直接赋值，看做是全局变量
var  a=b=c=9;
相当于： var a=9; b=9; c=9; 分号隔开 b c没有声明
想要集体声明，应该用逗号隔开
var a=9,b=9,c=9;

本文地址：https://blog.csdn.net/qq_46071321/article/details/107365207

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网