JavaScript中全局声明的let、const及箭头函数的执行上下文是什么？

一、let和const的执行流程 #

全局执行上下文分为创建阶段和执行阶段，let/const的处理逻辑和var、普通函数声明有明显区别：

• 创建阶段：JS引擎会扫描全局代码中的let/const声明，将变量名登记到全局作用域中，但不会进行初始化（不会像var那样设为undefined）。此时变量处于「暂时性死区（TDZ）」，在声明语句之前访问会直接抛出ReferenceError。
• 执行阶段：当代码执行到let/const的赋值语句时，才会完成变量的初始化。其中const变量一旦完成初始化，就无法被重新赋值（但如果是引用类型变量，其内部属性仍可修改）。

示例代码：

console.log(num); // 抛出ReferenceError，num处于暂时性死区
let num = 10;
console.log(num); // 输出10

const user = { age: 20 };
user.age = 25; // 合法，仅修改引用对象的内部属性
user = {}; // 抛出TypeError，const变量不可重新赋值

二、箭头函数的执行流程 #

箭头函数属于函数表达式，而非函数声明，所以它的执行逻辑和var fn = function() {}这类普通函数表达式一致：

• 创建阶段：
  • 如果箭头函数用var声明的变量存储（如var arrowFn = () => {}），变量arrowFn会被提升并初始化为undefined；
  • 如果用let/const存储（如let arrowFn = () => {}），则遵循let/const的规则，变量被登记到作用域但进入暂时性死区，不初始化。
• 执行阶段：只有当代码执行到箭头函数的赋值语句时，才会创建箭头函数实例并赋值给对应变量。在此之前调用该变量，要么得到undefined（var场景），要么抛出ReferenceError（let/const场景）。

示例代码：

console.log(testArrow1); // 输出undefined，var变量被提升
var testArrow1 = () => console.log('arrow function 1');

console.log(testArrow2); // 抛出ReferenceError，testArrow2处于暂时性死区
let testArrow2 = () => console.log('arrow function 2');

testArrow1(); // 执行到赋值语句后可正常调用，输出"arrow function 1"

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