为什么这个 JavaScript 代码的结果是“未定义的”？答案

【问题标题】：Why is the result of this JavaScript code "undefined"?为什么这个 JavaScript 代码的结果是“未定义的”？
【发布时间】：2015-04-19 01:16:15
【问题描述】：

我想弄清楚为什么浏览器控制台窗口中这段 Javascript 代码的结果是未定义的？不应该是“外面”吗？

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

谢谢

【问题讨论】：

标签： javascript function logging scope output

【解决方案1】：

这是“变量提升”的结果。（见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);

【讨论】：

不，不会。代码的行为是因为变量提升，而不是因为函数提升。
你给的参考是404

【解决方案2】：

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

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

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

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

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

【讨论】：

【解决方案3】：

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()

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

声明一次变量text。 Demo

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

【讨论】：

【解决方案6】：

全局+局部：一个更复杂的案例

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?

【讨论】：