JavaScript变量提升与作用域：为何函数能读取外部变量a的初始化值

这个运行结果和JavaScript的变量提升规则完全不冲突，产生疑惑的核心是混淆了「提升的生效逻辑」和「函数执行的时机」，拆解如下：

待分析的示例代码：

function sayHi(name){
   let result="Hi"+name+a;
   console.log(result)
}

let a=1;
sayHi("Alex")

核心规则澄清 #

• JavaScript代码运行分为编译、执行两个阶段，常说的变量提升、函数提升都是编译阶段完成的操作，不会改变代码从上到下的实际执行顺序。let声明的变量同样会被提升到所在作用域的顶部，但和var不同的是，let声明的变量在声明语句执行完成前会处于暂时性死区（TDZ），这个阶段访问变量会直接抛出初始化前访问的引用错误。
• 函数声明会在编译阶段被完整提升到作用域顶部，但函数体内部的代码不会在函数声明时就运行，只有实际调用函数的时候，才会进入函数作用域逐行执行内部逻辑。

代码完整执行流程 #

1. 编译阶段（代码正式执行前）：
   • 全局作用域完成sayHi函数的登记，完整存储函数的定义逻辑
   • 全局作用域完成let a的声明登记，此时a进入暂时性死区，暂未赋值
2. 执行阶段（逐行运行全局代码）：
   • 跳过已经完成提升的sayHi函数声明，执行let a=1：这一步完成a的初始化赋值，a的值为1，暂时性死区解除
   • 执行sayHi("Alex")，正式进入sayHi函数内部执行逻辑
   • 函数内执行字符串拼接逻辑时，先在当前函数作用域查找变量a，未找到就顺着作用域链向上查找全局作用域的a——此时全局的a已经完成赋值，值为1，自然可以正常读取，最终输出拼接后的结果。

反例验证 #

如果把函数调用挪到let a=1语句之前，才会触发大家熟知的暂时性死区报错，这才是「变量初始化不会被提升，提前访问报错」的正确场景：

function sayHi(name){
   let result="Hi"+name+a;
   console.log(result)
}
// 此时a仍处于暂时性死区，访问会抛出 ReferenceError: Cannot access 'a' before initialization
sayHi("Alex")
let a=1;

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