JavaScript中函数与变量同名时变量提升机制是怎样的？

问题解答 #

这两段代码的输出都是function，核心原因是函数声明的提升优先级高于var变量声明，具体的变量提升运行逻辑如下：

前置规则 #

JS代码执行分为两个阶段，提升操作发生在编译阶段：

• 编译阶段：扫描当前作用域内所有的var变量声明和函数声明，将其提前到作用域顶部，赋值操作会留在原位置等待执行阶段处理
• 同名声明的优先级：函数声明 > var变量声明。如果var只有声明没有赋值，不会覆盖已经存在的同名函数绑定，也不会将其重置为undefined

第一段代码运行逻辑 #

原代码：

console.log(typeof foo);

function foo() {
  return "bar";
}
var foo = "bar";

编译阶段处理后，等效的执行顺序为：

// 编译阶段先提升优先级更高的函数声明
function foo() {
  return "bar";
}
// 同名的var foo声明因为只有声明部分，已经存在同名函数绑定，所以直接被忽略
// 执行阶段从第一行开始运行
console.log(typeof foo); // 此时foo指向函数，输出function
foo = "bar"; // 赋值操作留在原位置执行，这行运行后foo才会变为字符串类型

第二段代码运行逻辑 #

原代码：

function foo() {
  return "bar";
}
var foo;

console.log(typeof foo);

编译阶段处理后，等效的执行顺序为：

// 编译阶段先提升函数声明
function foo() {
  return "bar";
}
// 同名的var foo只有声明没有赋值，直接被忽略
// 执行阶段按顺序运行，var foo的声明已经在编译阶段处理完毕，没有赋值所以无任何操作
console.log(typeof foo); // 此时foo仍指向函数，输出function

补充说明 #

如果var声明附带赋值操作，赋值会在执行阶段覆盖同名函数，例如将第一段代码的打印语句放到var foo = "bar"之后，输出就会变为string。

内容的提问来源于stack exchange，提问作者Kamya Kashyap