关于JS声明提升

声明提升简述

    声名提升是JS引擎对js代码预处理时做的工作,可以理解为把函数和变量的声明给提到靠前的位置。
其中值得注意的是只是提升了声明,而赋值并没有跟着提升。

    <script type="text/javascript">
        console.log(a);
        var a=10;//undefined
    </script>

在预处理后,就变成了

    <script type="text/javascript">
        var a
        console.log(a);
        a=10;//undefined
    </script>

这也就是为何输出undefined而不是报错的愿意因了

函数声明提升

首先探讨它的优先级:
如下代码:

    <script type="text/javascript">
        function fn() {
            console.log(1);
        }
        function fn() {
            console.log(2);//2
        }
        fn();
        /*
        function fn() {
            console.log(3);
        }
        function fn() {
            console.log(4);
        }
        fn();
        */
    </script>
    <script type="text/javascript">
        function fn() {
            console.log(1);
        }
        function fn() {
            console.log(2);
        }
        fn();
        function fn() {
            console.log(3);//3
        }
        /*
        function fn() {
            console.log(4);
        }
        fn();
        */
    </script>
    <script type="text/javascript">
        function fn() {
            console.log(1);
        }
        function fn() {
            console.log(2);
        }
        fn();
        function fn() {
            console.log(3);
        }
        function fn() {
            console.log(4);//4
        }
        fn();
    </script>

根据这几个例子,可以结论:函数声明时存在声明提升,而且是后者覆盖前者。函数的声明直接提升到作用域的最顶部。
而对于函数表达式,则不存在函数提升的情况。

    <script type="text/javascript">
        x();//error
        var x=function () {
            console.log(1);
        }
    </script>

变量声明提升

变量声明提升与函数声明提升类似,但要注意只是提升了声明,而赋值还是在原地,覆盖情况与函数声明一致。

<script type="text/javascript">
    console.log(num);//undefined
    var num=1;
    console.log(str);//1
    var num;
    console.log(num);//1
    var num=2
    console.log(num)//2
</script>

版权声明:本文为BL__UE原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。