Quartz 4

作用域链

4 min read

想象你住在一栋公寓里：

  1. 每层楼都有独立储物间（作用域）
  2. 你随身带着一串万能钥匙扣（作用域链）
  3. 找东西时必须从当前楼层逐层向上搜索

现实案例：

function 三楼住户() {
  const 私房钱 = "床底盒子"; // 当前楼层储物间
  
  function 四楼住户() {
    console.log(私房钱); // 钥匙扣能打开三楼储物间
  }
  
  四楼住户();
}
 
三楼住户(); // 输出"床底盒子"

二、技术概念详解

1. 作用域链的构成要素

要素对应比喻技术解释
当前作用域当前楼层储物间函数声明时所在的词法环境
[[OuterEnv]] 属性钥匙扣上的楼层钥匙指向外层词法环境的引用
变量查找规则逐层向上搜索RHS查询（取变量值）机制

2. 作用域链的创建时机

// 第一阶段：编译时确定作用域链
function outer() {          // outer.[[Environment]] = globalEnv
  let x = 10;               // outerEnv = {x: 10, [[OuterEnv]]: globalEnv}
  
  function inner() {        // inner.[[Environment]] = outerEnv
    console.log(x);         // 通过作用域链找到outerEnv中的x
  }
  
  return inner;
}
 
// 第二阶段：执行时维持链式结构
const fn = outer(); 
fn(); // 输出10（闭包维持了outerEnv的引用）

三、底层原理（V8引擎视角）

1. **词法环境的内部结构

// 全局环境
GlobalEnvironment = {
  Object: window,          // 全局对象
  outer: null              // 作用域链终点
}
 
// outer函数环境
outerEnv = {
  x: 10,
  [[OuterEnv]]: GlobalEnvironment  // 钥匙扣上的钥匙
}
 
// inner函数环境
innerEnv = {
  [[OuterEnv]]: outerEnv  // 指向outer环境
}

2. 变量查找流程

当执行 console.log(x) 时：

  1. 当前环境查找：检查 innerEnv 是否有 x → 不存在
  2. 向上层查找：通过 [[OuterEnv]] 找到 outerEnv → 存在 x=10
  3. 返回结果：使用找到的 x 值

四、闭包与作用域链的致命关系

经典内存泄漏案例

function 创建泄漏() {
  const 大数据 = new Array(1000000); // 占内存的数组
  
  return function() {
    console.log('闭包维持了大数据引用');
  };
}
 
const 泄漏函数 = 创建泄漏();
// 即使外层函数执行完毕，作用域链依然维持大数据的内存

解决方法：

泄漏函数 = null; // 手动断开引用链

五、作用域链 vs 原型链

特性作用域链原型链
用途变量查找属性/方法查找
方向由内向外（函数嵌套方向）由下至上（对象继承方向）
构成词法环境引用链__proto__ 链
终点全局环境null

六、最佳实践

  1. 避免过深嵌套
    超过3层作用域链会增加理解成本（可用模块化拆分）

    // 不推荐
function a() {
  function b() {
    function c() {
      /* 需要查找3层作用域链 */
    }
  }
}

  2. 警惕闭包滥用
    用 WeakMap 替代普通闭包存储敏感数据：

    const privateData = new WeakMap();
 
function SafeClass() {
  privateData.set(this, { secret: 123 });
}

Graph View

Backlinks