走出变量提升的迷雾：10分钟彻底搞懂JavaScript执行机制与作用域

作者爱学习的茄子

2025年5月18日 13:23

前言

JavaScript作为一门灵活的编程语言，其执行机制和变量声明规则有着诸多特性。理解这些特性对于编写高质量的JavaScript代码至关重要。本文将深入探讨JavaScript的执行机制、作用域、变量提升以及ES6引入的新特性，帮助开发者避免常见陷阱。

1. JavaScript代码的执行机制

JavaScript代码执行分为两个关键阶段：

1.1 编译阶段

当JavaScript引擎（如Chrome的V8）拿到代码后，首先进入编译阶段：

代码从硬盘读入内存
语法检测
创建执行上下文环境
处理变量声明和函数定义

// 编译阶段会创建类似这样的结构
currentVariable {
  showName: <function reference>,
  myName: undefined,
  // ...其他变量
}

1.2 执行阶段

编译完成后，代码按顺序执行，完成实际的赋值和函数调用操作。

2. 作用域：变量查找的规则

作用域决定了变量的可访问性和生命周期，JavaScript中包含三种主要作用域：

全局作用域：在最外层定义的变量
函数作用域：函数内部定义的变量
块级作用域：ES6引入，在{}内使用let或const定义的变量

2.1 作用域链

当访问一个变量时，JavaScript会按照"冒泡查找"的规则：

先在当前作用域查找
找不到则向上层作用域查找
直到找到变量或到达全局作用域
全局作用域也没有则报错

这种查找路径构成了作用域链：当前作用域 → 父作用域 → ... → 全局作用域

2.2 词法作用域

JavaScript采用的是词法作用域（Lexical Scope），也称为静态作用域，这意味着函数的作用域在函数定义时就已确定，而非函数调用时：

let globalVar = 'global';

function outer() {
  let outerVar = 'outer';
  
  function inner() {
    console.log(outerVar); // 访问的是定义时的外部变量
    console.log(globalVar); // 同样可以访问更外层的全局变量
  }
  
  return inner;
}

const innerFn = outer();
innerFn(); // 输出: "outer" 和 "global"

词法作用域的特点：

静态确定：函数的作用域在编写代码时（词法分析阶段）就已确定
嵌套关系：内部函数可以访问外部函数中声明的变量
闭包基础：正是因为词法作用域，JavaScript才能实现强大的闭包功能

2.2.1 词法作用域与动态作用域的区别

为了理解词法作用域的特性，我们来看一个对比示例：

let value = 'global';

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

function bar() {
  let value = 'local';
  foo();
}

bar(); // 在词法作用域下输出: "global"
       // 如果是动态作用域则会输出: "local"

在上面的例子中，foo函数中的value引用的是全局变量，而非bar函数中的局部变量，这正是词法作用域的体现。

3. 变量提升(Hoisting)现象

3.1 var的变量提升

使用var声明的变量会在编译阶段被"提升"到当前作用域的顶部，但只提升声明，不提升赋值：

console.log(myName); // 输出：undefined
var myName = '曾小贤';

实际执行顺序相当于：

var myName; // 声明被提升
console.log(myName); // undefined
myName = '曾小贤'; // 赋值保留在原位置

3.2 函数声明的提升

函数声明会被完整提升到作用域顶部，包括函数体：

showName(); // "函数执行了"
function showName() {
    let b = 2;
    console.log('函数执行了');
}

这就是为什么在示例代码中，showName()可以在函数声明之前调用。

3.3 变量提升的问题

showName(); // 函数执行了
console.log(myName); // undefined
var myName = '曾小贤';
function showName() {
    let b = 2;
    console.log('函数执行了');
}

变量提升会导致代码执行结果与阅读顺序不一致，造成困惑，是JavaScript设计上的一个争议点。

4. let/const与暂时性死区(TDZ)

4.1 TDZ现象

ES6引入的let和const解决了变量提升的混乱，它们声明的变量不会被提升，相反会创建"暂时性死区"：

console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 1;

从变量声明的块作用域开始，到该变量被赋值之前的区域，称为"暂时性死区"。在这个区域内，访问该变量会抛出错误。

4.2 块级作用域

{
  let blockVar = 'block scope';
  var functionVar = 'function scope';
}
console.log(functionVar); // "function scope"
console.log(blockVar); // ReferenceError: blockVar is not defined

let和const声明的变量严格遵循块级作用域，而var则遵循函数作用域。

5. var与let的关键区别

特性	var	let
作用域	函数作用域	块级作用域
变量提升	会提升声明，初始值为undefined	不提升，有TDZ
重复声明	允许在同一作用域重复声明	禁止在同一块作用域重复声明
全局声明	成为window对象属性	不会成为window对象属性

6. 执行上下文示意图

从图中可以看到，执行上下文包含：

全局上下文：最外层的执行环境
- 变量环境：存储var声明的变量和函数声明
```
a = undefined
fn=function
```
- 词法环境：存储let和const声明的变量

这种设计使得var声明的变量会出现提升现象，而let和const则不会。

7. 最佳实践建议

优先使用let和const：避免var的提升问题
默认使用const：如果变量不需要重新赋值，增加代码可靠性
理解TDZ：养成先声明后使用的习惯
合理划分作用域：减少作用域链查找，提高性能

总结

JavaScript的执行机制和变量声明规则看似复杂，实则有迹可循。理解编译和执行的双阶段过程、作用域链的查找规则、变量提升的工作原理以及ES6引入的新特性，不仅能帮助我们写出更可靠的代码，也能在面试中脱颖而出。

变量提升是JavaScript的一个历史包袱，但通过使用let和const，我们可以避开大多数陷阱。在现代JavaScript开发中，遵循"先声明后使用"的原则，合理利用块级作用域，才能充分发挥这门语言的优势。

普通视图

前言