为什么这个JavaScript代码的结果是"undefined"？

Question

我想弄清楚为什么 Javascript 代码在浏览器控制台 window 中的结果未定义？不应该是"outside"吗？

var text = 'outside';
function logIt(){
    console.log(text);
    var text = 'inside';
};
logIt();

谢谢

Answer 1

您正在覆盖可变文本。要获得您正在寻找的答案，请从第 4 行删除 var。

原因是函数内部有一个来自父作用域或全局作用域的名为 text 的变量，您正在更改它，然后在离开函数时处理它。

Answer 2

这是 "variable hoisting" 的结果。（参见 http://adripofjavascript.com/blog/drips/variable-and-function-hoisting。）

要使代码按预期运行，您需要在函数范围内分配变量或将其作为参数传递给函数：

var logIt = function (){
    var text = 'outside';
    console.log(text);
    text = 'inside';
};
logIt();

或

var text = 'outside';
var logIt = function (txtArg){
    console.log(txtArg);
    var text = 'inside';
};
logIt(text);

Answer 3

在JavaScript中，变量是"hoisted"到函数的顶部。也就是说，与某些其他语言（例如 C）不同，在函数内声明的变量在整个函数 的整个 范围内。所以编译器看到你的函数是这样的：

function logIt(){
    var text;
    console.log(text);
    text = 'inside';
} // <-- no semicolon after a function declaration

当您在 logIt 内将 text 声明为局部变量时，它会隐藏外部作用域中的变量。当一个变量被声明时，它被初始化为未定义。这就是打印 undefined 的原因。

如果你想在外部范围内保留 text，只需在函数内保留 var 声明即可。

var text = 'outside';
function logIt(){
    console.log(text); // logs 'outside' now
    text = 'inside';
}
logIt();

Answer 4

声明一次变量text。 Demo

var text = 'outside';
function logIt(){
    console.log(text);
     text = 'inside';
};
logIt();

Answer 5

全球+本地：一个更复杂的案例

var x = 5;

(function () {
    console.log(x);
    var x = 10;
    console.log(x); 
})();

这将打印出 undefined 和 10 而不是 5 和 10，因为 JavaScript 总是将变量声明（而不是初始化）移动到范围的顶部，使代码等同于：

var x = 5;

(function () {
    var x;
    console.log(x);
    x = 10;
    console.log(x); 
})();

来自这个回答What is the scope of variables in JavaScript?

Answer 6

您将 console.log(text) 放置在错误的位置:)

但严重的是，这是 Javascript 变量提升。 http://goo.gl/0L8h5D

这个：

var text = 'outside'
logIt = function () {
  console.log(text);
  var text = 'inside';
}
logIt();

相当于：

var text                    // hoisted to top of scope; text is undefined
text = 'outside'            // text is now assigned in place
logIt = function () {
  var text;                 // hoisted to top of scope; text is undefined
  console.log(text);        // spits out undefined
  text = 'inside';          // text is now assigned in place.
}
logIt();

为避免此类问题，请养成在范围块顶部声明所有 var 的习惯。

var text = 'outside'
logIt = function() {
  var text = 'inside'
  console.log(text)
}
logIt()

如果您的意图是吐出 'outside'，那么您应该在 logIt 函数中使用不同的标识符名称。

为什么这个JavaScript代码的结果是"undefined"？

Why is the result of this JavaScript code "undefined"?

javascript

logging

scope

function

output