《从变量提升到块级作用域：深入理解 JavaScript 作用域机制的演进与实现》

鱼鱼块
114 阅读6分钟

JavaScript 作用域机制解析：从变量提升到块级作用域

JavaScript 的作用域机制是理解其执行行为的核心。早期的 ES5 仅支持全局作用域和函数作用域，而 ES6 引入了块级作用域，并通过 let 和 const 解决了长期存在的变量提升问题。本文将结合执行上下文、变量环境、词法环境等概念，系统梳理 JavaScript 作用域的演进逻辑与运行机制。

一、作用域的本质：变量的可见性与生命周期

作用域决定了变量在程序中的可见性（能否被访问）和生命周期（何时创建与销毁）。在 JavaScript 中，主要有三种作用域：

  • 全局作用域：在任何函数或块外部声明的变量，其生命周期贯穿整个页面运行周期；
  • 函数作用域：在函数内部使用 var 声明的变量，仅在函数内可见，生命周期随函数调用结束而终止；
  • 块级作用域：由 {} 包裹的代码区域（如 if、for、while 等），ES6 起可通过 let/const 声明仅在该块内有效的变量。 s
var globalVar = "我是全局变量";
function myFunction(){
    var localVar = "我是局部变量";
    console.log(globalVar);
    console.log(localVar);
}
myFunction();
console.log(globalVar);
 console.log(localVar); // 报错：localVar 未定义

image.png

上述代码展示了全局与函数作用域的基本行为：localVar 无法在函数外访问，体现了作用域的隔离性。

二、变量提升：ES5 的设计缺陷与历史成因

在 ES5 中，var 声明存在“变量提升”（Hoisting）现象：所有 var 变量和函数声明会被提升到当前作用域顶部，并初始化为 undefined（函数声明则完整提升）。

showName();
console.log(myname); // undefined
var myname = "张三";
function showName(){
    console.log('函数showName 执行了');
}

image.png

这段代码能正常运行，因为 var myname 和 function showName 都被提升。然而，这种机制常导致反直觉行为：

var name = '张三';
function showName(){
    console.log(name); // undefined
    if(true){
        var name = "lol的faker";
    }
    console.log(name); // "lol的faker"
}
showName();

image.png 此处 var name 在函数内被提升，覆盖了全局变量，第一个 console.log 输出 undefined。这暴露了两个问题：

  1. 变量易被意外覆盖；
  2. 本应随块结束销毁的变量却持续存在。

究其原因，JavaScript 最初是为浏览器快速添加动态效果而设计的“KPI项目”，设计周期极短。为简化实现，放弃块级作用域，采用“统一提升至作用域顶部”的策略——这是工程权衡下的产物，却成为长期痛点。

三、ES6 的革新：块级作用域与暂时性死区

ES6 通过 let 和 const 引入块级作用域，并配合“暂时性死区”（Temporal Dead Zone, TDZ）机制，从根本上修复了变量提升带来的混乱。

let name = '张三';
function showName(){
    console.log(name); // "张三"
    if(true){
        let name = "lol的faker";
    }
    console.log(name); // "张三"
}
showName();

与 var 不同，if 块内的 let name 仅在该块内有效，不会影响外层作用域。因此两次 console.log 均输出全局变量值。

更重要的是，let/const 在声明前处于 TDZ，禁止访问：

function foo(){
    console.log(val); // ReferenceError
    let val = 5;
}

这避免了“未初始化却可访问”的陷阱。

四、执行上下文视角：变量环境 vs 词法环境

V8 引擎在执行 JavaScript 时分为编译和执行两个阶段。进入函数时，会创建执行上下文，其中包含两个关键组件：

  • 变量环境（Variable Environment） ：存放 var 声明及函数声明，支持变量提升；
  • 词法环境（Lexical Environment） ：存放 let/const 声明，维护块级作用域，并实现 TDZ。
function foo(){
    var a = 1;
    let b = 2;
    {
        let b = 3;
        var c = 4;
        let d = 5;
        console.log(a); // 1
        console.log(b); // 3
    }
    console.log(b); // 2
    console.log(c); // 4
     console.log(d); // ReferenceError
}
foo();

image.png 分析此例： 当 foo() 被调用时，JavaScript 引擎会经历如下过程： 11645361-1FAD-4E1C-B03A-8557F2DB6C0C.png 在编译阶段，引擎扫描函数体：

  • 所有 var 声明（a, c）被登记到变量环境，并初始化为 undefined；
  • 所有 let/const 声明（外层 b）被登记到词法环境，但处于暂时性死区（TDZ） ，不可访问。 此时块内的 let b 和 let d 尚未被处理，因为它们属于内层块作用域。

随着代码逐行执行，变量被赋值，作用域逐步展开：

67F3FB8C-13CF-4F1A-8934-AC15CCA9358C.png

执行到 let b = 2; 后，外层词法环境中的 b 被赋值为 2，TDZ 结束。
接着遇到 {，引擎准备进入一个新的块级作用域。

9625B41F-066C-4BD2-AF8B-44B93C395CF9.png

当执行 console.log(a) 时，引擎先在词法环境中查找失败，转而在变量环境中找到 a = 1；
执行 console.log(b) 时，在当前块的词法环境中找到 b = 3。
图示清晰展示了变量查找的优先级与作用域层级关系。

在内层块执行完毕后，var c = 4 已写入变量环境，let b = 3 和 let d = 5 写入内层词法环境。此时内层作用域已关闭，但变量环境仍保留 c = 4，供函数后续使用。 320C54AF-A1CE-48E1-8265-D297A0087492.png 当存在嵌套块时，词法环境表现为“栈式结构”：进入内层块时压入新环境，离开时弹出。图中显示 b 在外层为 2，在内层为 3，且 d 仅存在于内层环境，外部不可见。

五、循环中的作用域差异

var 与 let 在循环中的表现差异最能体现作用域模型的演进：

// 使用 var
for(var i = 0; i < 3; i++){
    setTimeout(() => console.log(i), 0); // 输出 3, 3, 3
}

// 使用 let
for(let j = 0; j < 3; j++){
    setTimeout(() => console.log(j), 0); // 输出 0, 1, 2
}

var i 在函数（或全局）作用域中只有一个绑定，循环结束后 i = 3，所有回调共享该值；
而 let j 在每次迭代时创建新的块级作用域，每个回调捕获的是各自迭代中的 j 值。

六、“一国两制”：兼容与演进的平衡

ES6 并未废弃 var，而是让 var 与 let/const 共存于同一执行上下文：

  • var → 变量环境 → 支持提升 → 函数作用域；
  • let/const → 词法环境 → TDZ + 块级作用域。

这种“一国两制”设计既保证了向后兼容，又提供了更安全的编程范式。

结语

JavaScript 的作用域机制从 ES5 的“简单但危险”走向 ES6 的“严谨且可控”，背后是语言对工程实践反馈的积极响应。理解变量提升、块级作用域、TDZ 以及执行上下文中的双环境模型，不仅能写出更可靠的代码，也能深入把握 JavaScript 的执行本质。在现代开发中，应优先使用 let/const，仅在必要时使用 var，以充分利用 ES6 带来的安全性与可预测性。

avatar
文章
阅读
粉丝