深入理解JavaScript作用域与变量提升：从执行上下文到ES6块级作用域

闲云ing
53 阅读9分钟

深入理解JavaScript作用域与变量提升：从执行上下文到ES6块级作用域

在JavaScript的学习旅程中，作用域与变量提升是两个无法回避的核心机制，也是初学者乃至经验丰富的开发者常常陷入困惑的根源。由于早期JavaScript在设计时周期紧迫，引入了变量提升这一特性，导致许多代码行为与开发者的直觉不相符；而ES6通过引入let和const关键字以及块级作用域，有效的解决了这些问题。本文将从执行上下文的视角出发，结合具体代码示例，深入解析JavaScript的作用域原理、变量提升带来的陷阱，以及ES6如何通过块级作用域实现更安全、更直观的变量管理。

一、先看几个“不符合直觉”的代码案例

案例1：变量提升导致的undefined

showName();
console.log(myname); // undefined
var myname = "路明非";
function showName() {
  console.log('函数showName执行了');
}
  • 函数声明会被完整提升，可安全在定义前调用；
  • var 变量仅声明被提升，赋值不会提升，访问未赋值的变量得到 undefined；
  • 这正是“变量提升”容易引发 bug 的原因——看似未声明的变量其实已存在，只是值为 undefined。

✅ 核心结论：var 的变量提升容易引发意外行为，建议使用 let/const 避免这个问题。

案例2：全局作用域与函数局部作用域

var globalVal = "我是全局变量";
function myFunction() {
  var localVal = "我是局部变量";
  console.log(globalVal); // 输出：我是全局变量
  console.log(localVal); // 输出：我是局部变量
}
myFunction();
console.log(globalVal); // 输出：我是全局变量
console.log(localVal); // 报错：localVal is not defined
  • globalVal 是全局变量，在函数内外均可访问；
  • localVal 是函数内的局部变量，仅在 myFunction 内部有效；
  • 函数内部可访问全局变量，但全局作用域无法访问函数内的局部变量；
  • 尝试在函数外部访问局部变量会抛出 ReferenceError。

✅ 核心结论：变量的作用域决定了其可见性和生命周期，局部变量对外部不可见。

案例3：var的块级作用域失效

var name = "刘总";
function showName() {
  console.log(name); // undefined
  if(true) {
    var name = "大厂的苗子"
  }
  console.log(name); // 输出：大厂的苗子
}
showName()

这段代码体现了 var 的两个关键特性：

  • 变量提升：函数内的 var name 被提升到函数顶部，初始值为 undefined，导致首次 console.log(name) 输出 undefined，而非全局的 "刘总"；
  • 无块级作用域：if 块中的 var name 仍属于函数作用域，会遮蔽（shadow）同名的全局变量。

✅ 核心结论：var 声明的变量具有函数作用域和变量提升行为，容易引发意外遮蔽和未定义问题。

案例4：let的暂时性死区

let name = 'liu'
{
  console.log(name);// 报错：ReferenceError: Cannot access 'name' before initialization
  let name = '大厂的苗子'
}
  • let/const 引入了暂时性死区（TDZ），防止在声明前使用变量；
  • 即使外层存在同名变量，块内同名 let 声明会“遮蔽”外层变量，并使其在 TDZ 中不可访问；
  • 这是 JavaScript 为增强变量安全性、避免意外使用未初始化变量而设计的重要机制。

✅ 核心结论：let声明的变量存在暂时性死区，在块内声明前访问变量，会直接报错，这与var的变量提升形成了鲜明对比。

案例5：执行上下文中的var/let区别

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);// 报错：d is not defined
}
foo();

这段代码清晰展示了 JavaScript 中 var 与 let 的作用域差异：

  • var a 和 var c 属于函数作用域，即使在块内声明，也能在整个函数中访问；
  • let b 和 let d 属于块级作用域，其中内层 let b = 3 遮蔽了外层 b = 2，而 d 仅在块内有效；
  • 块外访问 d 会报错，因为其作用域已结束。

✅ 核心结论：var 无块级作用域，let 有；同名 let 变量在内层块中会遮蔽外层变量。

二、JavaScript执行机制：理解作用域的基础

要搞懂作用域和变量提升，首先需要了解JavaScript的执行机制。V8引擎执行JS代码主要分为编译阶段和执行阶段，同时会借助调用栈和执行上下文来管理变量和函数。

1. 两个核心阶段

  • 编译阶段：V8引擎会对代码进行解析，同时创建执行上下文，完成变量提升、函数提升等操作。
  • 执行阶段：在执行上下文中，按照顺序执行代码，完成变量赋值、函数调用等操作。

2. 调用栈与执行上下文

  • 调用栈：以函数为单位入栈，函数执行完成后出栈，同时回收对应的变量。调用栈的作用是管理函数的执行顺序和上下文切换。
  • 执行上下文：每个函数执行时都会创建一个执行上下文，包含变量环境和词法环境两个核心部分，用于存储变量和函数声明。

三、变量提升：JavaScript的设计缺陷

变量提升（hoisting） 是指在代码编译阶段，V8引擎会将变量和函数的声明提升到其所在作用域的顶部，这一特性导致了很多与直觉不符的代码表现，被认为是JavaScript的设计缺陷。

1. 变量提升的表现

  • 函数声明会被完整提升，因此案例1中showName()函数能在声明前调用。
  • var声明的变量只会提升声明部分，赋值操作留在原地，因此案例1中myname在赋值前访问会输出undefined。

2. 变量提升带来的问题

  • 变量被意外覆盖：由于变量提升，后声明的变量可能会覆盖先声明的变量，导致代码逻辑出错。
  • 变量未被及时销毁：var声明的变量不存在块级作用域，在块内声明的变量会留在函数或全局作用域中，无法及时销毁，造成内存浪费。

四、作用域：变量查找的规则

作用域指在程序中定义变量的区域，该位置决定了变量的可见性和生命周期。JavaScript中的作用域主要分为三类：

1. 全局作用域

在代码的任何位置都能访问的作用域，全局变量的生命周期与页面生命周期一致。例如案例2中的globalVal，在函数内和全局都能访问。

2. 函数局部作用域

只能在函数内部访问的作用域，局部变量的生命周期随函数执行结束而销毁。例如案例2中的localVal，函数外部无法访问。

3. 块级作用域

  • ES5及之前：不支持块级作用域，var声明的变量会忽略if、for等块结构，提升到函数或全局作用域。
  • ES6及之后：通过let/const支持块级作用域，if、for、{}等块结构都会形成独立的作用域，块内声明的变量无法被块外访问。

五、ES6的解决方案：暂时性死区与块级作用域

为了解决变量提升的缺陷，ES6引入了let/const，带来了暂时性死区和块级作用域两个重要特性，同时为了向下兼容，采用了“一国两制”的策略管理变量。

1. “一国两制”：变量环境与词法环境

  • var声明的变量被存储在变量环境中，依然保留变量提升的特性。
  • let/const声明的变量被存储在词法环境中，支持暂时性死区和块级作用域。

2. 暂时性死区（TDZ）

在let/const声明变量前的区域，变量无法被访问，这一区域被称为暂时性死区。例如案例4中，块内name声明前访问会直接报错，避免了变量提升带来的undefined问题。

3. 块级作用域的实现：词法环境的栈结构

ES6的词法环境内部维护了一个小型栈结构，当执行到块级作用域时：

  1. 块内通过let/const声明的变量会被放入词法环境的栈顶。
  2. 变量查找时，优先从栈顶开始查找，确保块内变量优先被访问。
  3. 块级作用域执行完成后，栈顶的变量会被出栈销毁，保证块外无法访问。

这也是案例5中，块内的let b = 3不会影响块外let b = 2，且let d = 5在块外无法访问的原因。

六、为什么早期JavaScript要设计变量提升？

JavaScript当时是一个kpi项目，设计周期很短，主要用于给浏览器页面添加简单的动态效果，因此设计上追求简单、快速：

  • 不支持块级作用域，同时将变量统一提升到作用域顶部，是当时最快、最简单的设计方案。
  • 当时浏览器厂商竞争激烈，JavaScript需要快速落地并投入使用，没有足够的时间进行复杂的语法设计（如面向对象、块级作用域的完整实现）。
  • 函数可以在声明前调用，变量可以先使用后声明，在早期简单的开发场景中，降低了开发者的使用门槛。

七、总结

JavaScript的作用域和变量提升是理解JS执行机制的关键：

  1. 早期JavaScript因设计局限，存在变量提升特性，导致了变量覆盖、未及时销毁等问题。
  2. ES6通过let/const引入暂时性死区和块级作用域，借助词法环境的栈结构实现了块级作用域的隔离，同时保留var的变量提升以向下兼容。
  3. 作用域本质是变量查找的规则，而作用域链则是变量查找的路径。

通过几个案例，JS作用域与变量提升是理解其执行逻辑的核心，早期设计局限造就的变量提升虽简化了当时的实现，但却也埋下了代码缺陷。ES6的改进既解决了当时的缺陷，又兼顾兼容性，这给开发者带来了一个很巧妙的设计。而在开发中优先用let/const，这样避免了变量提升带来的问题，从而提升了代码的可维护性。

avatar
文章
阅读
粉丝