作用域链：JavaScript 变量查找的路径

理解作用域链

回想一下你在一个大型图书馆中查找一本书的经历。你首先会在当前所在的书架区域寻找，如果没找到，就会扩大范围到相邻的区域，然后是整个楼层，最后可能需要查询整个图书馆的目录系统。JavaScript 中的变量查找过程与此非常相似，这个查找路径就是我们所说的作用域链（Scope Chain）。

作用域链是 JavaScript 引擎在查找变量时所遵循的一条查找路径。当代码需要访问一个变量时，引擎会从当前作用域开始查找，如果找不到，就会向外层作用域继续查找，一直到全局作用域为止。这个由内向外的查找路径，就像一条链条将各个作用域连接起来，因此被称为作用域链。

作用域链的形成

作用域链在函数定义时就已经确定，而不是在函数调用时。这是因为 JavaScript 采用的是词法作用域（也叫静态作用域）。

基本的作用域链

让我们从一个简单的例子开始理解作用域链的形成：

javascript

const globalVar = "global";

function outer() {
  const outerVar = "outer";

  function inner() {
    const innerVar = "inner";

    // 当访问变量时，会沿着作用域链查找
    console.log(innerVar); // 在当前作用域找到
    console.log(outerVar); // 在外层函数作用域找到
    console.log(globalVar); // 在全局作用域找到
  }

  inner();
}

outer();

在这个例子中，当 inner 函数执行时，如果需要访问变量，JavaScript 引擎会按照以下顺序查找：

inner 函数作用域：首先在 inner 函数内部查找
outer 函数作用域：如果没找到，向上查找 outer 函数作用域
全局作用域：如果还没找到，最后查找全局作用域
未找到：如果全局作用域也没有，则抛出 ReferenceError

作用域链的可视化

我们可以通过更复杂的嵌套来理解作用域链的层级关系：

javascript

const level0 = "全局作用域";

function level1() {
  const level1Var = "第一层函数作用域";

  function level2() {
    const level2Var = "第二层函数作用域";

    function level3() {
      const level3Var = "第三层函数作用域";

      // 这里形成了一条完整的作用域链：
      // level3作用域 -> level2作用域 -> level1作用域 -> 全局作用域

      console.log(level3Var); // 在当前层找到
      console.log(level2Var); // 向上一层查找
      console.log(level1Var); // 向上两层查找
      console.log(level0); // 向上三层查找到全局
    }

    level3();
  }

  level2();
}

level1();

这个例子展示了一条四层的作用域链。无论嵌套多深，查找规则都是一样的：从内向外，逐层查找，直到找到变量或到达全局作用域。

变量查找过程

作用域链最重要的作用就是指导 JavaScript 引擎如何查找变量。让我们详细了解这个过程。

标识符解析过程

当 JavaScript 代码中出现一个变量名时，引擎会启动标识符解析过程：

javascript

const applicationName = "TechBlog";
const version = "1.0.0";

function initialize() {
  const environment = "production";
  let startTime = Date.now();

  function setupDatabase() {
    const connectionString = "mongodb://localhost:27017";
    let retryCount = 0;

    function connect() {
      // 查找 retryCount
      // 1. connect作用域 -> 没有
      // 2. setupDatabase作用域 -> 找到！
      retryCount++;

      // 查找 connectionString
      // 1. connect作用域 -> 没有
      // 2. setupDatabase作用域 -> 找到！
      console.log(`Connecting to ${connectionString}`);

      // 查找 environment
      // 1. connect作用域 -> 没有
      // 2. setupDatabase作用域 -> 没有
      // 3. initialize作用域 -> 找到！
      console.log(`Environment: ${environment}`);

      // 查找 applicationName
      // 1. connect作用域 -> 没有
      // 2. setupDatabase作用域 -> 没有
      // 3. initialize作用域 -> 没有
      // 4. 全局作用域 -> 找到！
      console.log(`Starting ${applicationName} v${version}`);
    }

    connect();
  }

  setupDatabase();
}

initialize();

查找失败的情况

如果沿着整个作用域链都没有找到变量，JavaScript 会抛出错误：

javascript

function testScope() {
  function inner() {
    // 尝试访问一个不存在的变量
    // 引擎会查找：inner作用域 -> testScope作用域 -> 全局作用域
    // 都没找到，抛出错误
    console.log(nonExistentVar); // ReferenceError: nonExistentVar is not defined
  }

  inner();
}

testScope();

变量遮蔽与作用域链

当内层作用域和外层作用域有同名变量时，内层变量会"遮蔽"外层变量：

javascript

const message = "全局消息";

function outer() {
  const message = "外层消息";

  function inner() {
    const message = "内层消息";

    // 查找 message 时，在当前作用域就找到了，不会继续向上查找
    console.log(message); // "内层消息"

    // 外层的 message 被遮蔽了，无法直接访问
  }

  inner();
  console.log(message); // "外层消息"（这里访问的是outer作用域的message）
}

outer();
console.log(message); // "全局消息"（这里访问的是全局作用域的message）

这个机制说明了作用域链查找的一个重要特点：查找会在第一次找到变量时停止，不会继续向上查找同名变量。

作用域链与闭包

作用域链是闭包能够工作的基础。当内部函数被返回并在外部执行时，它仍然保持着对其定义时所在作用域链的引用。

闭包中的作用域链

javascript

function createCounter(initialCount) {
  let count = initialCount;
  const createdAt = Date.now();

  // 返回的函数形成闭包
  return function increment() {
    count++;

    // 即使在外部调用这个函数，它仍然可以访问
    // createCounter的作用域链
    console.log(`Count: ${count}`);
    console.log(`Created at: ${createdAt}`);

    return count;
  };
}

const counter1 = createCounter(0);
const counter2 = createCounter(100);

counter1(); // Count: 1, Created at: [时间戳]
counter1(); // Count: 2, Created at: [时间戳]

counter2(); // Count: 101, Created at: [时间戳]
counter2(); // Count: 102, Created at: [时间戳]

// 每个闭包都保持着自己的作用域链
// counter1 和 counter2 各自维护独立的 count 和 createdAt

多层闭包的作用域链

闭包可以嵌套，形成多层的作用域链：

javascript

function createApp(appName) {
  const createdAt = new Date();

  function createModule(moduleName) {
    const moduleVersion = "1.0.0";

    function createFeature(featureName) {
      let enabled = true;

      return {
        toggle() {
          enabled = !enabled;
          // 这个函数的作用域链：
          // toggle作用域 -> createFeature作用域 ->
          // createModule作用域 -> createApp作用域 -> 全局作用域
          console.log(
            `${appName}.${moduleName}.${featureName} v${moduleVersion}: ${enabled}`
          );
        },

        status() {
          return {
            app: appName,
            module: moduleName,
            feature: featureName,
            version: moduleVersion,
            enabled: enabled,
            created: createdAt,
          };
        },
      };
    }

    return { createFeature };
  }

  return { createModule };
}

const app = createApp("ProjectManager");
const module = app.createModule("TaskModule");
const feature = module.createFeature("Notifications");

feature.toggle();
// "ProjectManager.TaskModule.Notifications v1.0.0: false"

console.log(feature.status());
// { app: "ProjectManager", module: "TaskModule", ... }

块级作用域与作用域链

ES6 引入的 let 和 const 创建的块级作用域也会参与作用域链的构建：

块级作用域在作用域链中的位置

javascript

const globalConfig = "global";

function processData() {
  const functionConfig = "function";

  if (true) {
    const blockConfig = "block";

    {
      const innerBlockConfig = "inner block";

      // 作用域链：
      // 内层块作用域 -> 外层块作用域 ->
      // if块作用域 -> 函数作用域 -> 全局作用域
      console.log(innerBlockConfig); // "inner block"
      console.log(blockConfig); // "block"
      console.log(functionConfig); // "function"
      console.log(globalConfig); // "global"
    }

    // console.log(innerBlockConfig); // ReferenceError
    console.log(blockConfig); // "block"
  }

  // console.log(blockConfig); // ReferenceError
  console.log(functionConfig); // "function"
}

processData();

循环中的块级作用域

块级作用域在循环中特别有用，每次迭代都会创建新的作用域：

javascript

const tasks = ["Task 1", "Task 2", "Task 3"];

// 使用 var - 所有回调共享同一个作用域
for (var i = 0; i < tasks.length; i++) {
  setTimeout(function () {
    // 这里的作用域链会查找到全局的 i
    // 当回调执行时，循环已经结束，i 的值是 3
    console.log(`var: ${tasks[i]}`); // undefined, undefined, undefined
  }, 100);
}

// 使用 let - 每次迭代创建新的块级作用域
for (let j = 0; j < tasks.length; j++) {
  setTimeout(function () {
    // 每个回调都有自己的 j
    // 作用域链会找到对应迭代的 j
    console.log(`let: ${tasks[j]}`); // Task 1, Task 2, Task 3
  }, 100);
}

作用域链的性能影响

理解作用域链不仅有助于正确编写代码，还能帮助我们写出性能更好的代码。

查找深度的影响

变量在作用域链中的位置越深，查找时间就越长：

javascript

const globalVar = "global";

function level1() {
  const var1 = "level1";

  function level2() {
    const var2 = "level2";

    function level3() {
      const var3 = "level3";

      function level4() {
        // 在循环中频繁访问不同层级的变量
        for (let i = 0; i < 1000000; i++) {
          // 快速 - 在当前作用域
          const local = var3;

          // 较慢 - 需要向上查找2层
          const fromLevel2 = var2;

          // 更慢 - 需要向上查找3层
          const fromLevel1 = var1;

          // 最慢 - 需要向上查找4层到全局
          const fromGlobal = globalVar;
        }
      }

      level4();
    }

    level3();
  }

  level2();
}

优化建议：缓存外部变量

对于在循环中频繁访问的外部作用域变量，可以在循环前缓存到局部变量：

javascript

function processItems() {
  const config = {
    maxSize: 1000,
    timeout: 5000,
    retries: 3,
  };

  function processArray(items) {
    // 不好的做法 - 每次循环都要查找作用域链
    for (let i = 0; i < items.length; i++) {
      if (items[i].size > config.maxSize) {
        // 每次都需要查找 config
        console.log(`Item too large: ${config.maxSize}`);
      }
    }

    // 好的做法 - 缓存到局部变量
    const maxSize = config.maxSize;
    for (let i = 0; i < items.length; i++) {
      if (items[i].size > maxSize) {
        // 直接访问局部变量，更快
        console.log(`Item too large: ${maxSize}`);
      }
    }
  }

  return processArray;
}

避免过深的嵌套

减少函数嵌套层级可以缩短作用域链，提高性能：

javascript

// 不好的做法 - 嵌套太深
function处理订单(order) {
  function验证订单() {
    function检查库存() {
      function更新数据库() {
        function发送通知() {
          // 作用域链很长
          console.log(order); // 需要向上查找4层
        }
        发送通知();
      }
      更新数据库();
    }
    检查库存();
  }
  验证订单();
}

// 好的做法 - 扁平化结构
function processOrder(order) {
  validateOrder(order);
  checkInventory(order);
  updateDatabase(order);
  sendNotification(order);
}

function validateOrder(order) {
  // 处理逻辑
}

function checkInventory(order) {
  // 处理逻辑
}

function updateDatabase(order) {
  // 处理逻辑
}

function sendNotification(order) {
  // 处理逻辑
}

作用域链的常见问题

循环中的作用域陷阱

这是 JavaScript 中最著名的陷阱之一：

javascript

// 问题代码
const handlers = [];

for (var i = 0; i < 3; i++) {
  handlers.push(function () {
    console.log(i);
  });
}

handlers[0](); // 3
handlers[1](); // 3
handlers[2](); // 3（预期应该是 0, 1, 2）

// 原因：所有函数共享同一个外层作用域的 i

解决方案有多种：

javascript

// 解决方案1：使用 let 创建块级作用域
const handlers1 = [];
for (let i = 0; i < 3; i++) {
  handlers1.push(function () {
    console.log(i);
  });
}
handlers1[0](); // 0
handlers1[1](); // 1
handlers1[2](); // 2

// 解决方案2：使用 IIFE 创建新作用域
const handlers2 = [];
for (var i = 0; i < 3; i++) {
  (function (index) {
    handlers2.push(function () {
      console.log(index);
    });
  })(i);
}

// 解决方案3：使用函数参数
const handlers3 = [];
for (var i = 0; i < 3; i++) {
  handlers3.push(
    (function (index) {
      return function () {
        console.log(index);
      };
    })(i)
  );
}

setTimeout 与作用域链

setTimeout 中的回调函数执行时的作用域链可能与预期不同：

javascript

function countdown() {
  for (var i = 1; i <= 3; i++) {
    setTimeout(function () {
      console.log(i);
    }, i * 1000);
  }
}

countdown(); // 输出三次 4（预期是 1, 2, 3）

// 原因：回调执行时，循环已结束，i 已经变成 4

// 解决方案
function countdownFixed() {
  for (let i = 1; i <= 3; i++) {
    setTimeout(function () {
      console.log(i); // 1, 2, 3
    }, i * 1000);
  }
}

意外的全局变量

忘记声明变量会导致意外创建全局变量，破坏作用域链：

javascript

function createUser(name) {
  // 忘记使用 let/const/var
  userId = Math.random().toString(36).substr(2, 9);

  return {
    name: name,
    id: userId,
  };
}

createUser("John");

// userId 成了全局变量！
console.log(userId); // 可以访问
console.log(window.userId); // 在浏览器中也可以访问

// 严格模式可以防止这个问题
("use strict");
function createUserStrict(name) {
  // userId = Math.random().toString(36).substr(2, 9);
  // ReferenceError: userId is not defined

  let userId = Math.random().toString(36).substr(2, 9);
  return {
    name: name,
    id: userId,
  };
}

实际应用场景

模块模式中的作用域链

运用作用域链实现私有变量和方法：

javascript

const UserModule = (function () {
  // 私有变量 - 在作用域链中，但外部无法访问
  let users = [];
  const SECRET_KEY = "my-secret-key";

  // 私有方法
  function hashPassword(password) {
    // 这里可以访问 SECRET_KEY
    return `${password}-${SECRET_KEY}`;
  }

  function validateEmail(email) {
    return /\S+@\S+\.\S+/.test(email);
  }

  // 公共接口
  return {
    addUser(user) {
      if (!validateEmail(user.email)) {
        throw new Error("Invalid email");
      }

      const newUser = {
        ...user,
        passwordHash: hashPassword(user.password),
        id: users.length + 1,
      };

      delete newUser.password;
      users.push(newUser);

      return newUser.id;
    },

    getUser(id) {
      return users.find((u) => u.id === id);
    },

    getAllUsers() {
      // 返回副本，防止外部修改原数组
      return users.map((u) => ({
        id: u.id,
        name: u.name,
        email: u.email,
      }));
    },
  };
})();

// 使用模块
UserModule.addUser({
  name: "Sarah",
  email: "[email protected]",
  password: "secret123",
});

console.log(UserModule.getAllUsers());

// 无法访问私有变量和方法
// console.log(users); // ReferenceError
// console.log(SECRET_KEY); // ReferenceError
// UserModule.hashPassword(); // TypeError

配置管理器

利用作用域链实现配置的层级覆盖：

javascript

function createConfigManager(defaults) {
  const globalConfig = { ...defaults };

  function createEnvironment(envName) {
    const envConfig = {};

    function createModule(moduleName) {
      const moduleConfig = {};

      return {
        set(key, value) {
          moduleConfig[key] = value;
        },

        get(key) {
          // 作用域链查找：module -> env -> global
          if (key in moduleConfig) return moduleConfig[key];
          if (key in envConfig) return envConfig[key];
          if (key in globalConfig) return globalConfig[key];
          return undefined;
        },

        getAll() {
          // 合并所有层级的配置
          return {
            ...globalConfig,
            ...envConfig,
            ...moduleConfig,
          };
        },
      };
    }

    return {
      set(key, value) {
        envConfig[key] = value;
      },

      createModule,
    };
  }

  return {
    set(key, value) {
      globalConfig[key] = value;
    },

    createEnvironment,
  };
}

// 使用
const config = createConfigManager({
  apiTimeout: 5000,
  retries: 3,
});

config.set("version", "1.0.0");

const prodEnv = config.createEnvironment("production");
prodEnv.set("apiTimeout", 10000); // 覆盖全局配置

const authModule = prodEnv.createModule("auth");
authModule.set("retries", 5); // 覆盖环境配置

console.log(authModule.get("version")); // "1.0.0" (从全局)
console.log(authModule.get("apiTimeout")); // 10000 (从环境)
console.log(authModule.get("retries")); // 5 (从模块)
console.log(authModule.getAll());
// { apiTimeout: 10000, retries: 5, version: "1.0.0" }

总结

作用域链是 JavaScript 中一个核心但常被忽视的概念。理解它的工作原理对于写出正确、高效的代码至关重要：

查找机制：作用域链定义了变量查找的路径，从内向外，逐层查找
形成时机：作用域链在函数定义时确定，而非调用时
闭包基础：作用域链是闭包能够工作的基础，内部函数保持对外部作用域的引用
性能考虑：深层嵌套和频繁的外部变量访问会影响性能
常见陷阱：循环中的闭包、setTimeout 回调、意外的全局变量都与作用域链相关

掌握作用域链的概念，不仅能帮助我们理解代码的运行机制，还能让我们在设计模块、管理状态、优化性能时做出更好的决策。在下一篇文章中，我们将深入探讨闭包——作用域链最强大的应用之一。

作用域链：JavaScript 变量查找的路径 ​

理解作用域链 ​

作用域链的形成 ​

基本的作用域链 ​

作用域链的可视化 ​

变量查找过程 ​

标识符解析过程 ​

查找失败的情况 ​

变量遮蔽与作用域链 ​

作用域链与闭包 ​

闭包中的作用域链 ​

多层闭包的作用域链 ​

块级作用域与作用域链 ​

块级作用域在作用域链中的位置 ​

循环中的块级作用域 ​

作用域链的性能影响 ​

查找深度的影响 ​

优化建议：缓存外部变量 ​

避免过深的嵌套 ​

作用域链的常见问题 ​

循环中的作用域陷阱 ​

setTimeout 与作用域链 ​

意外的全局变量 ​

实际应用场景 ​

模块模式中的作用域链 ​

配置管理器 ​

总结 ​

作用域链：JavaScript 变量查找的路径

理解作用域链

作用域链的形成

基本的作用域链

作用域链的可视化

变量查找过程

标识符解析过程

查找失败的情况

变量遮蔽与作用域链

作用域链与闭包

闭包中的作用域链

多层闭包的作用域链

块级作用域与作用域链

块级作用域在作用域链中的位置

循环中的块级作用域

作用域链的性能影响

查找深度的影响

优化建议：缓存外部变量

避免过深的嵌套

作用域链的常见问题

循环中的作用域陷阱

setTimeout 与作用域链

意外的全局变量

实际应用场景

模块模式中的作用域链

配置管理器

总结