从执行上下文到作用域链：JavaScript变量管理的底层逻辑

摘要

JavaScript的运行机制中，执行上下文、作用域与作用域链是串联变量声明、查找与访问的核心逻辑。它们看似抽象，实则通过一套严谨的规则，决定了代码中变量的“生命周期”与“可见范围”。下面我们结合具体示例与图示，拆解这三者的关联与运作方式。

一、执行上下文：变量的“临时运行容器”

执行上下文是JavaScript引擎执行代码时创建的动态环境，每个函数调用、全局代码执行都会对应一个执行上下文。它包含变量环境（存储var声明）和词法环境（存储let/const声明）两大核心部分，在代码执行前的“创建阶段”完成初始化。

1.1 变量环境与词法环境的分工

以foo函数的执行上下文为例： 图中可以看到：

• 变量环境仅处理var声明：a=1（已赋值）、c=undefined（仅声明未赋值）；
• 词法环境处理let/const声明，且支持块级作用域：外层b=2与块内b=3会形成独立的词法环境分支，块内声明的变量仅在块内可见。

我们用一段代码验证这个结构：

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) // 词法环境块内分支已销毁，报错
}
foo()

这段代码的执行逻辑，正是变量环境与词法环境的分工体现：var声明不受块级限制，而let/const的作用域被严格限定在块内。

二、作用域链：变量查找的“路径地图”

当代码访问一个变量时，JavaScript会沿“作用域链”从当前作用域向外层查找。作用域链的本质是词法作用域的嵌套结构——由函数声明的位置决定，而非调用位置。

2.1 词法作用域：作用域链的“静态蓝图”

看下面的代码与调用栈示意图：

function bar() {
  console.log(myName)
}
function foo() {
  var myName = "极客邦"
  bar()
}
var myName = "极客时间"
foo()

很多人会误以为bar执行时会输出foo中的myName，但实际输出的是全局的“极客时间”。原因在于：bar的作用域链在编译阶段已确定——bar自身作用域 → 全局作用域，与调用位置无关。

每个执行上下文都有一个outer指针，指向外层作用域对应的执行上下文：bar的outer直接指向全局执行上下文，因此查找myName时会跳过foo的执行上下文。

2.2 嵌套作用域的查找规则

对于多层嵌套的函数，作用域链会按“当前作用域→外层函数作用域→全局作用域”的顺序延伸。例如：

let count = 1
function main(){
  let count = 2
  function bar(){
    let count = 3
    function foo(){
      let count = 4
    }
  }
}

foo的作用域链是：foo作用域（count=4）→ bar作用域（count=3）→ main作用域（count=2）→ 全局作用域（count=1）。查找变量时，会从链的最内层开始，“找到即停”。

三、执行上下文与作用域链的协同运作

执行上下文是“动态运行环境”，作用域链是“静态查找路径”，两者结合完成变量的管理与访问。我们用一个复杂示例拆解其运作过程：

function bar() {
  var myName = "极客世界"
  let test1 = 100
  if (1) {
    let myName = "Chrome浏览器"
    console.log(test)
  }
}
function foo() {
  var myName = "极客邦"
  let test = 2
  {
    let test = 3
    bar()
  }
}
var myName = "极客时间"
let myAge = 10
let test = 1
foo()

当bar中执行console.log(test)时，查找流程是：

1. 先在bar的词法环境（块内分支）查找test，未找到；
2. 沿作用域链到bar的词法环境（外层分支），未找到；
3. 沿bar的outer指针到全局执行上下文的词法环境，找到test=1，输出1。

这个过程中，执行上下文的outer指针直接关联到作用域链的外层，保证了“静态路径”与“动态环境”的一致性。

四、总结：JavaScript变量管理的底层逻辑

执行上下文、作用域与作用域链的关系可概括为：

• 作用域定义变量的“可见范围”（静态规则）；
• 作用域链是作用域的嵌套结构（查找路径）；
• 执行上下文是运行时的“容器”，通过outer指针关联作用域链，完成变量的声明与访问。

理解这三者的关联，就能解释JavaScript中“变量提升”“块级作用域”“变量查找顺序”等核心现象，也能避免因作用域混淆导致的Bug。