JavaScript 函数和变量声明的提升(代码预解析)

最新推荐文章于 2022-11-23 17:56:00 发布

houyanhua1

最新推荐文章于 2022-11-23 17:56:00 发布

阅读量296

点赞数

分类专栏： JavaScript 文章标签： javascript 提升预解析

本文链接：https://blog.csdn.net/houyanhua1/article/details/79839298

版权

JavaScript 专栏收录该内容

140 篇文章 4 订阅

订阅专栏

代码预解析：将function声明的函数和var声明的变量名提升到最前面(声明时同名的变量不会覆盖同名的函数)，但是不会提升赋值的操作(赋值的操作会覆盖掉同名的函数内容)。函数表达式不会被提升(只提升声明,不提升表达式)

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

        //js代码的执行分为两个步骤
        //1.预解析(提升)（hoisting）
            //JavaScript代码在预解析阶段，会对以var声明的变量名，和function开头的语句块，进行提升操作（只提升声明,不提升赋值操作）。 提升不会跨越<script>标签。大括号{}中(if/for语句块中)的声明可能不会被提升(取决于浏览器)
        //2.执行


        //一、函数的提升
//        func();  // function提升到上面,函数会被正常调用
//        function func(){
//            alert("Funciton has been called");
//        }


        //二、变量的提升
//        alert(a);
//        var a = 1;

        //提升之后的代码
//        var a;
//        alert(a);  // undefined
//        a = 1;  // 不会提升赋值操作。


        //三、函数同名，如何提升
        //提升两个函数，后面的函数会覆盖前面函数
//        func1();  //last
//        function func1(){
//            console.log('This is first func1');
//        }
//
//        func1();  //last
//        function func1(){
//            console.log('This is last func1');
//        }
//        //预解析提升后的代码
//        function func1(){
//            console.log('This is first func1');
//        }
//
//        function func1(){
//            console.log('This is last func1');
//        }
//        func1();  //last
//        func1();  //last


        //四、变量和函数同名
        //提升：只提升函数，不提升变量
        alert(foo);  // function foo(){};
        function foo(){}
        var foo = 2;
        alert(foo); //2
        //预解析 提升后的代码
        function foo(){};  // 只提升函数,忽略变量提升的声明
        alert(foo);  // function foo(){};
        foo=2;   //不提升赋值操作 覆盖掉上面的函数
        alert(foo);  //2


    </script>
</head>
<body>

</body>
</html>

函数表达式不会被提升.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //函数表达式
        //函数表达式不会被提升,只提升声明
        func();
        var func = function(){
            alert("你猜我会不会被调用");
        }

        //提升后的代码
        var func;   // 只提升声明
        func();  // func is not a function
        func = function(){  // 不提升表达式
            alert("你猜我会不会被调用");
        };
    </script>
</head>
<body>

</body>
</html>