JavaScript 变量与函数提升

问题

下面代码会输出什么？

foo();
var foo;
function foo(){
  console.log(1);
}
foo = function(){
  console.log(2);
}

解答

答案是：1

根据 JavaScript 的提升规则，函数声明会优先于变量声明被提升。上述代码在执行时会被解析成以下形式：

function foo(){
  console.log(1);
}

var foo; // 变量声明被提升，但不会覆盖已存在的函数

foo(); // 输出 1

foo = function(){
  console.log(2);
}

执行过程：

1. 函数 foo 的声明被提升到作用域顶部
2. 变量 foo 的声明被提升，但由于同名函数已存在，该声明不会改变 foo 的值
3. 执行 foo()，此时 foo 是函数声明，输出 1
4. 之后 foo 被重新赋值为新的函数表达式（输出 2），但此时已经执行完毕

关键点

• 函数声明的提升优先级高于变量声明
• 变量声明提升时，如果已存在同名函数，不会覆盖该函数
• 函数表达式的赋值不会被提升，只有声明部分会提升
• 提升只发生在编译阶段，赋值操作仍在原位置执行