JS函数--函数提升与变量提升 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数--函数提升与变量提升</title>
</head>
<body>
    <script>
        /*
            javascript函数--函数提升与变量提升
        */
        /*
            1.作用域
                1.1.全局作用域
                1.2.函数作用域
                1.3.块级作用域
            2.变量提升
            3.函数提升
        */

        //1.作用域
            /*
                JS中一个变量定义和调用都会是在一个固定的范围中，这个范围就叫做作用域。
                作用域分为全局作用域、函数作用域和块级作用域（es6）。
            */
            //1.1 全局作用域
            var a = 'global variable';//全局作用域变量

            //1.2 函数作用域
            function foo(){
                var b = 'function variable';//函数作用域变量
                console.log(a);//global variable
                console.log(b);//function variable
            }

            //1.3 块级作用域
            {
                let c = 'block variable';//块级作用域变量
                console.log(c);//block variable
            }
            // console.log(c);//报错！！
        //2.变量提升
            /*
                变量提升是将变量声明提升到作用域顶部的位置，而变量的赋值不会被提升。
                只有通过var关键字定于的变量才会产生提升。
            */
           //1.1 全局作用域
           //未赋值
           console.log(aa)//undefined
           //未定义
        //    console.log(ac)//Uncaught ReferenceError: ac is not defined

           var aa = 'global variable';//全局作用域变量

            //1.2 函数作用域
            (function (){
                var bb = 'function variable';//函数作用域变量
                console.log(aa);//global variable
                console.log(bb);//function variable
            })();
        //3.函数提升
            /*
                通过函数声明式定义的函数也会出现提升，也只有这一种函数。
                函数提升会将整个函数体一起提升，包括了执行逻辑。
            */
           console.log(foo());//foo函数！
           function foo(){
               return "foo函数！";
           }
           /*
                以上函数执行时等替于：

                function foo(){
                    return "foo函数！";
                }
                console.log(foo());//foo函数！
           */
    </script>
</body>
</html>

　　

posted @ 2021-08-30 09:55  飞渝  阅读(51)  评论(0)    收藏  举报