无法理解此javascript代码的输出

Question

为什么以下代码undefined打印？ 同样，在删除了if块之后，它会在此输出hello there 。

var message = "hello there!";

function hello(){
  console.log(message);

  if (true) {
    var message = "wassup?!";
  }
}

hello();

Answer 1

这称为吊装 。 从Mozilla文档 （添加了重点）：

无论变量声明在何处出现 ，都将在执行任何代码之前对其进行处理。 用var声明的变量的范围是其当前的执行上下文 ，它是封闭的函数，或者对于在任何函数之外声明的变量，是全局的。

在if块中声明的var message隐藏了函数内部所有代码的全局message变量，包括对console.log()的调用。

还有两个要点。 首先，JavaScript将变量声明与变量初始化分开。 这就是为什么在执行console.log(message)时，本地message变量具有未定义值的原因，而不是"wassup?!" 。 其次，由于提升是一种违反直觉的行为（至少对于习惯于其他语言的程序员而言），因此大多数JavaScript整理工具都会警告您有关不在执行上下文开头的var语句。 我强烈建议您找到一个整理工具（想到的是JSLint，JSHint，ESLint和JSCS）并使用它。

Answer 2

当您定义与全局名称相同的局部变量时，就会发生这种情况。 由于在函数范围内有一个var message ，因此它将仅引用本地message而不是全局message 。 由于当时未提供值，因此undefined 。 如果您以后将它移动到注意if这将是"wassup?!" 。

解决的办法是您可能不想创建局部变量。 因此更改var message = "wassup?!" message = "wassup?!" 。

Answer 3

要添加到@Spencer Wieczorek的答案中，变量定义被“提升”到其作用域的顶部，而变量赋值仍保留在您编写它的位置。 因此，您提供的代码实际上是这样翻译的：

var message = "hello there!";

function hello(){
  var message;
  console.log(message);

  if (true) {
    message = "wassup?!";
  }
}

hello();

这就更清楚地解释了为什么您看到这些结果-在console.log()调用之前， message变量是在hello()函数的作用域中创建的，但是没有得到值'wassup?!' 直到函数中的更高版本。

编辑： 这是有关此行为的更多信息 ，正如@TedHopps在评论中指出的那样，称为“悬挂”，而不是“搭便车”。