作用域链到底长什么样？JS 执行上下文是如何嵌套的？

想象你在客厅寻找家门钥匙：先翻口袋，再查背包，最后询问家人——这完美对应着JavaScript的作用域链查询规则。当引擎需要访问变量时，它会像剥洋葱般逐层向上检索：


function outer() {
  const key = '客厅抽屉';
  function inner() {
    console.log(key); // 向外层作用域逐级查找
  }
  inner();
}

这个过程中，词法作用域决定了变量查找路径。每个函数在被定义时，就会生成自己的[[Scope]]属性，形成由内到外的嵌套链条。就像洋葱结构，内层函数可以访问外层变量，但外层无法触碰内层。

每个执行上下文包含两个核心部件：

环境记录(Environment Record)：存储当前作用域的变量
外部引用(Outer Reference)：指向外层词法环境


// 全局上下文入栈
function A() {   // A上下文入栈
  function B() { // B上下文入栈
    // 代码执行
  }              // B上下文出栈
}              // A上下文出栈

如图所示的后进先出(LIFO)栈结构，当前执行上下文始终位于栈顶。当函数调用发生时，新的上下文被创建并压栈，执行结束后弹出。

当内部函数持有对外部变量的引用时，就会形成闭包：


function createCounter() {
  let count = 0;          // 被闭包捕获的变量
  return function() {
    return ++count;       // 保持对外部作用域的引用
  };
}

这两个概念常被混淆：

作用域链	执行上下文栈
词法环境的外部引用链	正在执行的上下文容器
在函数定义时确定	随函数调用动态变化

现代JS引擎通过以下方式提升性能：

变量逃逸分析：检测变量是否被闭包引用
内联缓存(Inline Cache)：加速属性查找
隐藏类机制：优化对象存取


// 不良实践：多层嵌套作用域
function processData() {
  const data = fetchData();
  data.filter(x => x > 10)
      .map(x => x  2)
      .forEach(x => console.log(x)); // 3层嵌套作用域
}

// 优化方案：拆分函数
function filterData(data) { / 单层作用域 / }
function transformData(data) { / 单层作用域 / }

在开发者工具中：