为什么在外部作用域中定义时，隐藏变量的计算结果为未定义？

发布于 2024-08-07 09:04:09 字数 811 浏览 7 评论 0原文

考虑以下代码段：

<html><head></head>
<body>
    <script type="text/javascript">
        var outside_scope = "outside scope";
        function f1() {
            alert(outside_scope) ;
        }
        f1();
    </script>
</body>
</html>

此代码的输出是警报框显示消息“outside 但是，如果我稍微修改代码：

<html><head></head>
<body>
    <script type="text/javascript">
        var outside_scope = "outside scope";
        function f1() {
            alert(outside_scope) ;
            var outside_scope = "inside scope";
        }
        f1();
    </script>
</body>
</html>

警报框显示消息“未定义”。我可以如果在两种情况下都显示“未定义”，则理解逻辑。但是，那个没有发生。仅在第二种情况下才显示“未定义”。这是为什么呢？

预先感谢您的帮助！

原文

Consider the following piece of code:

<html><head></head>
<body>
    <script type="text/javascript">
        var outside_scope = "outside scope";
        function f1() {
            alert(outside_scope) ;
        }
        f1();
    </script>
</body>
</html>

The output for this code is that the alert box displays the message "outside
scope". But, if I slightly modify the code as:

<html><head></head>
<body>
    <script type="text/javascript">
        var outside_scope = "outside scope";
        function f1() {
            alert(outside_scope) ;
            var outside_scope = "inside scope";
        }
        f1();
    </script>
</body>
</html>

the alert box displays the message "undefined". I could have
understood the logic if it displays "undefined" in both the cases. But, that
is not happening. It displays "undefined" only in the second case. Why is this?

Thanks in advance for your help!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

云淡月浅 2024-08-14 09:04:09

变量会提升。这意味着无论变量放置在函数中的哪个位置，它都会移动到定义它的作用域的顶部。

例如：

var outside_scope = "outside scope";
function f1() {
    alert(outside_scope) ;
    var outside_scope = "inside scope";
}
f1();

被解释为：

var outside_scope = "outside scope";
function f1() {
    var outside_scope; // is undefined
    alert(outside_scope) ;
    outside_scope = "inside scope";
}
f1();

因此，并且 JavaScript 具有的仅限函数作用域，建议在函数顶部，以模拟将要发生的情况。

Variables are subject to hoisting. This means that regardless of where a variable is placed within a function, it is moved to the top of the scope in which it is defined.

For example:

var outside_scope = "outside scope";
function f1() {
    alert(outside_scope) ;
    var outside_scope = "inside scope";
}
f1();

Gets interpreted into:

var outside_scope = "outside scope";
function f1() {
    var outside_scope; // is undefined
    alert(outside_scope) ;
    outside_scope = "inside scope";
}
f1();

Because of that, and the function only scope that JavaScript has, is recommended to declare all the variables at the top of the function, to resemble what will happen.

回复收藏 0 原文

太阳男子 2024-08-14 09:04:09

在第一种情况下，您的代码正在访问全局变量“outside_scope”，该变量已初始化为“外部范围”。

Javascript 具有函数级作用域，因此在第二种情况下，它正在访问函数作用域变量“outside_scope”，但在出现警报框时尚未初始化。所以显示未定义。

回复收藏 0 原文

反话 2024-08-14 09:04:09

JavaScript 有函数作用域，而不是块作用域。

在第二种情况下，outside_scope 的声明被提升到函数的顶部（但赋值却没有）。

这是一个很好的例子，说明了为什么如果将所有变量声明放在函数的顶部，JavaScript 代码会更容易阅读。您的第二个示例相当于：

function f1() {
    var outside_scope;
    alert(outside_scope);
    outside_scope = "inside scope";
}

您现在可能可以理解为什么会出现“未定义”。

JavaScript has function scope, not block scope.

In the second case, the declaration of outside_scope is hoisted up to the top of the function (but the assignment isn't).

This is a great example of why JavaScript code is easier to read if you put all your variable declarations up at the top of the function. Your second example is equivalent to:

function f1() {
    var outside_scope;
    alert(outside_scope);
    outside_scope = "inside scope";
}

and you can probably now understand why you're getting "undefined."

回复收藏 0 原文

纵山崖 2024-08-14 09:04:09

在第二个示例中，局部变量存在于整个函数范围内。您在警报之后定义它并不重要，它在整个函数中存在。

然而，实际的分配直到警报之后才发生，因此是“未定义”。

回复收藏 0 原文

我最亲爱的 2024-08-14 09:04:09

这是由于所谓的变量声明提升造成的。

基本上，JavaScript 将变量声明一分为二，将赋值保留在声明的位置，并将实际声明提升到函数的顶部：

var f1 = function ()  {
   // some code
   var counter = 0;
   // some more code
}

var f2 = function () {
   var counter; // initialized with undefined
   // some code
   counter = 0;
   // some more code
}

在运行时，< code>f1() 被转换为 f2()。我在此处写了一篇深入的博客文章。我希望这可以帮助您了解代码中发生的情况。

这也是原因，在 JavaScript 中建议在函数顶部声明变量。它可以帮助您了解代码运行时的作用。

This is due to something called the hoisting of variable declarations.

Basically, JavaScript separates a variable declaration in two, leaving the assignment where you did the declaration and hoisting the actual declaration to the top of the function:

var f1 = function ()  {
   // some code
   var counter = 0;
   // some more code
}

var f2 = function () {
   var counter; // initialized with undefined
   // some code
   counter = 0;
   // some more code
}

On run-time, f1() gets translated into f2(). I wrote an in depth blog post about this here. I hope this helps you understand what happens in your code.

This is also the reason, it is recommended to declare your variables at the top of a function in JavaScript. It helps you understand what the code does, when it runs.

回复收藏 0 原文