为什么这个函数会返回'undefined'?

Question

我遇到了一个非常令人困惑的问题，我无法弄清楚:

var foo = 'outside';

function logIt(){

   console.log(foo); 
   var foo = 'inside';

} 

logIt();

那会产生 undefined，这对我来说已经无法解释了。但更奇怪的是这个：

var foo = 'outside';

function logIt(){

   console.log(foo); 

} 

logIt();

实际上会产生外部效果。

为什么会这样？

- user1869935

---

这是 hoisting（变量提升）的概念。https://dev59.com/pms05IYBdhLWcg3wAdST - JonSG

Answer 1

变量提升

由于变量声明（以及声明一般）在执行任何代码之前就会被处理，所以在代码中的任何位置声明变量都等效于在顶部声明它。

因此，您的代码等效于：

var foo = 'outside';

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

logIt();

在调用 console.log 时，foo 的值为 undefined。

- Matteo Tassinari

Answer 2

这与Javascript中的变量提升有关。

var foo = 'outside';

function logIt(){

   console.log(foo); 
   var foo = 'inside';
} 

logIt();

将在内部变为：

var foo = 'outside';

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

logIt();

因此，在console.log中，foo将会是未定义的 :-)。

- DoXicK

Answer 3

正如其他人正确提到的那样，这是由于变量提升。

对于许多开发人员来说，变量提升是 JavaScript 中一个未知或被忽视的行为。 如果开发人员不理解变量提升，程序可能会包含错误（bug）。 为了避免错误，请始终在每个作用域的开头声明所有变量。

因此，在您的示例中，应该像这样：

function logIt(){ foo = 'inside'; console.log(foo); }

logIt();

以获得预期的结果。

- Arsalan

Answer 4

你正在寻找有关 JavaScript 中提升的信息。

当你写下这段代码时：

var foo = 'outside';

function logIt(){

   console.log(foo); 
   var foo = 'inside';

} 

logIt();

JavaScript 将会像这样解释代码：

var foo = 'outside';

function logIt(){
   var foo; //undefined
   console.log(foo); 
   foo = 'inside';

} 

logIt();

logIt() 函数内的 foo 在 console.log(foo) 之前被声明为 undefined，所以它是未定义的。

在第二个例子中，全局变量 var foo = 'outside' 声明后才运行 console.log(foo)，这就是为什么它打印出了 outside。

- sandrina-p