打赏

js 变量提升与函数提升

规则：

函数的提升优先于变量提升。同名的函数会覆盖同名的函数与变量。同名的变量不会覆盖同名的函数。

示例代码1：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>变量提升与函数提升</title>
</head>
<body>
    <script type="text/javascript">
        var a = 20;
        function fn(){
            console.log('fn')
        }
        function fn(){
            console.log('covert fn')
        }
        function a(){
            console.log('cover a')
        }
        console.log(a);
        fn();
        var fn = 'I want to cover function name fn.'
        console.log(fn)
        函数的提升优于变量提升。同名的函数会覆盖函数与变量。
    </script>
</body>
</html>

控制台输出

 

解释：

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>变量提升与函数提升</title>
    </head>

    <body>
        <script type="text/javascript">
            //真正的执行顺序为：
            //函数提升
            function fn() {
                console.log('fn')
            }
            //函数提升
            function fn() {
                console.log('covert fn')
            }
            //函数提升
            function a() {
                console.log('cover a')
            }
            //变量提升
            var a = undefined;
            //变量提升
            var fn = undefined;
            a = 20;
            console.log(a); //20
            fn(); //covert fn
            fn = 'I want to cover function name fn.';
            console.log(fn); //I want to cover function name fn.
        </script>
    </body>

</html>

 示例代码2：

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>变量提升与函数提升</title>
    </head>

    <body>
        <script type="text/javascript">
            function test() {
                console.log(foo)
                console.log(bar)
                var foo = 'hello'
                console.log(foo)
                var bar = function() {
                    return 'world'
                }

                function foo() {
                    return 'hello'
                }
            }
            test();
        </script>
    </body>

</html>

控制台输出：

解释：

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>变量提升与函数提升</title>
    </head>

    <body>
        <script type="text/javascript">
            //执行顺序为：
            function test() {
                //函数提升
                function foo() {
                    return 'hello'
                }
                //变量提升 但是不会覆盖同名的函数
                // var foo = undefined;
                //变量提升
                var bar = undefined;
                console.log(foo)
                console.log(bar)
                foo = 'hello'
                console.log(foo)
                bar = function() {
                    return 'world'
                }
            }
            test();
        </script>
    </body>

</html>

 

posted @ 2018-07-23 18:34  孟繁贵  阅读(748)  评论(0)  编辑  收藏  举报
TOP