JavaScript 基础（005_变量提升）

最新推荐文章于 2024-10-18 11:12:30 发布

柯南道尔2606

最新推荐文章于 2024-10-18 11:12:30 发布

阅读量573

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/Google2606/article/details/52585564

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JavaScript Hoisting：JavaScript 语言允许变量在使用之后再声明，换言之，变量能够在声明之前被使用。写这篇 blog 的目的只是理解变量提升的概念以及它所产生的现象，避免在 JavaScript 世界里使用变量提升这一特性，要严格要求自己。

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript Scope</title>
        <script type="text/javascript">
            // 变量提升
            console.log(x);
            var x; // 如果删除声明x变量的代码，console.log(x)在执行时会报错：x is not defined
        </script>
    </head>
    <body>
        <div class="content">
            <pre>
                // 变量提升
                console.log(x);
                var x;
            </pre>
        </div>
    </body>
</html>

变量提升

然而，JavaScript 语言只能提升变量的声明，不能提升变量的初始化，修改以上代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript Scope</title>
        <script type="text/javascript">
            // 变量提升
            console.log(x);
            var x = "Hello World!";
        </script>
    </head>
    <body>
        <div class="content">
            <pre>
                // 变量提升
                console.log(x);
                var x = "Hello World!";
            </pre>
        </div>
    </body>
</html>

变量提升

可以看到，即使我们对 x 变量已经初始化（赋值），但是，在 console 中依然输出 undefined（在 console 中执行 window.x 会输出 Hello World!）。

案例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript Scope</title>
        <script type="text/javascript">
            // 变量提升
            var str = "Hello World!";
            (function() {
                console.log(str);
                var str = "Javascript Hoisting";
            })();
        </script>
    </head>
    <body>
        <div class="content">
            <pre>
                // 变量提升
                var str = "Hello World!";
                (function() {
                    console.log(str);
                    var str = "Javascript Hoisting";
                })();
            </pre>
        </div>
    </body>
</html>

等价代码：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript Scope</title>
        <script type="text/javascript">
            // 变量提升
            var str = "Hello World!";
            (function() {
                var str;
                console.log(str);
                str = "Javascript Hoisting";
            })();
        </script>
    </head>
    <body>
        <div class="content">
            <pre>
                // 变量提升
                var str = "Hello World!";
                (function() {
                    var str;
                    console.log(str);
                    str = "Javascript Hoisting";
                })();
            </pre>
        </div>
    </body>
</html>