作用域基础：JavaScript 中变量的可见性规则

回想一下你在公司或学校时的工作场景。每个部门都有自己的文件柜，里面存放着各种文档和资料。你所在部门的成员可以自由访问本部门的文件柜，但要访问其他部门的文件，就需要特定的权限。JavaScript 中的作用域（Scope）就像这些文件柜的访问权限系统，它决定了程序中变量的"可见性"—— 哪些代码可以访问哪些变量，哪些地方又无法访问。

作用域是 JavaScript 最核心的概念之一，也是理解闭包、this 关键字、变量提升等高级特性的基础。掌握作用域规则，能让你写出更清晰、更安全、更易维护的代码。

什么是作用域

作用域是一套规则，用来管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称进行变量查找。简单来说，作用域决定了变量的可访问性（visibility）和生命周期。

作用域的核心作用

作用域主要解决三个问题：

1. 变量隔离
不同作用域中的变量互不干扰，即使同名也不会冲突。这就像不同房间里可以有同名的物品，但它们是完全独立的。

function roomA() {
  let book = "JavaScript Guide"; // roomA 的 book
  console.log(book); // "JavaScript Guide"
}

function roomB() {
  let book = "CSS Handbook"; // roomB 的 book
  console.log(book); // "CSS Handbook"
}

roomA();
roomB();

这两个函数中都有名为 book 的变量，但它们存在于不同的作用域中，互不影响。

2. 访问控制
作用域规则决定了代码在某个位置可以访问哪些变量，不能访问哪些变量。这种限制能有效防止变量被意外修改。

function outer() {
  let privateData = "Secret"; // 只能在 outer 内部访问

  function inner() {
    console.log(privateData); // 可以访问外层的 privateData
  }

  inner();
}

outer();
console.log(privateData); // ReferenceError: privateData is not defined

privateData 变量只在 outer 函数内部可见，外部代码无法访问，这提供了一种天然的封装机制。

3. 内存管理
当某个作用域执行完毕后，其中的变量通常会被垃圾回收机制清理，释放内存。这确保了程序不会无限制地占用内存资源。

作用域的类型概览

JavaScript 主要有以下几种作用域类型：

全局作用域（Global Scope）

在任何函数或代码块之外声明的变量，都位于全局作用域。这些变量在程序的任何地方都可以访问。

let globalVar = "I'm global"; // 全局变量

function showGlobal() {
  console.log(globalVar); // 可以访问
}

showGlobal(); // "I'm global"
console.log(globalVar); // "I'm global"

全局变量就像公司的公共区域，任何员工都能进入。但正因为如此，过多的全局变量可能导致命名冲突和难以追踪的 bug。

函数作用域（Function Scope）

在函数内部声明的变量，只能在该函数内部访问。函数外部的代码无法看到或使用这些变量。

function calculate() {
  let result = 10 + 20; // 函数作用域变量
  console.log(result); // 30
}

calculate();
console.log(result); // ReferenceError: result is not defined

函数作用域像是一个私人办公室，里面的文件只有进入这个办公室的人才能看到。

块级作用域（Block Scope）

由一对花括号 {} 创建的作用域，使用 let 或 const 声明的变量会被限制在块级作用域内。

if (true) {
  let blockVar = "I'm in a block"; // 块级作用域
  console.log(blockVar); // "I'm in a block"
}

console.log(blockVar); // ReferenceError: blockVar is not defined

块级作用域是 ES6 引入的特性，它让变量的作用范围更加精确和可控。

作用域与变量声明

不同的变量声明方式（var、let、const）在作用域上有显著差异：

var: 函数作用域

使用 var 声明的变量只有函数作用域和全局作用域，没有块级作用域。这是一个经常导致混淆的特性。

function testVar() {
  if (true) {
    var x = 10; // var 没有块级作用域
  }
  console.log(x); // 10 - 可以访问！
}

testVar();

在这个例子中，虽然 x 是在 if 块中声明的，但因为使用了 var，它实际上属于整个 testVar 函数的作用域，所以在 if 块外仍然可以访问。

这种行为经常会引发问题，特别是在循环中：

for (var i = 0; i < 3; i++) {
  setTimeout(function () {
    console.log(i); // 会输出什么？
  }, 100);
}
// 输出: 3, 3, 3

因为 var i 没有块级作用域，所有的 setTimeout 回调函数共享同一个 i 变量。当它们执行时，循环已经结束，i 的值是 3。

let 和 const: 块级作用域

let 和 const 拥有块级作用域，它们只在声明所在的代码块内有效。

function testLet() {
  if (true) {
    let y = 20; // let 有块级作用域
    const z = 30; // const 也有块级作用域
  }
  console.log(y); // ReferenceError: y is not defined
  console.log(z); // ReferenceError: z is not defined
}

testLet();

使用 let 可以解决前面 var 的循环问题：

for (let i = 0; i < 3; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100);
}
// 输出: 0, 1, 2

每次循环迭代都会创建一个新的 i 变量，每个 setTimeout 回调函数都会捕获到自己那次迭代的 i 值。

作用域链的初步认识

当 JavaScript 引擎查找一个变量时，它会遵循一定的规则：首先在当前作用域中查找，如果找不到，就会向外层作用域查找，一直到全局作用域。这个查找路径就叫做作用域链（Scope Chain）。

let globalLevel = "global"; // 全局作用域

function outer() {
  let outerLevel = "outer"; // outer 函数作用域

  function inner() {
    let innerLevel = "inner"; // inner 函数作用域

    // 访问变量时的查找顺序:
    console.log(innerLevel); // 1. 先在 inner 中找 ✓
    console.log(outerLevel); // 2. inner 中没有，去 outer 中找 ✓
    console.log(globalLevel); // 3. outer 中没有，去全局中找 ✓
  }

  inner();
}

outer();

这个查找过程是单向的，只能从内向外，不能从外向内：

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

  function inner() {
    let innerVar = "inner";
  }

  inner();
  console.log(innerVar); // ReferenceError: innerVar is not defined
}

outer();

外层函数 outer 无法访问内层函数 inner 中的变量 innerVar，就像你在大厅里无法看到某个房间内的物品一样。

实际应用场景

1. 避免全局污染

在大型项目中，过多的全局变量会导致命名冲突和难以维护的代码。使用作用域可以有效避免这个问题。

// 不好的做法 - 污染全局作用域
var userName = "Alice";
var userAge = 25;
var userEmail = "[email protected]";

// 更好的做法 - 使用函数作用域封装
function createUser() {
  let userName = "Alice";
  let userAge = 25;
  let userEmail = "[email protected]";

  return {
    getName: () => userName,
    getAge: () => userAge,
    getEmail: () => userEmail,
  };
}

const user = createUser();
console.log(user.getName()); // "Alice"

2. 创建私有变量

利用函数作用域，我们可以创建外部无法直接访问的私有变量：

function createCounter() {
  let count = 0; // 私有变量

  return {
    increment() {
      count++;
      return count;
    },
    decrement() {
      count--;
      return count;
    },
    getCount() {
      return count;
    },
  };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount()); // 2
console.log(counter.count); // undefined - 无法直接访问

外部代码无法直接修改 count 变量，只能通过提供的方法来操作，这确保了数据的安全性。

3. 避免循环中的闭包问题

理解作用域可以帮助我们避免常见的循环陷阱：

// 问题代码 - 使用 var
function createButtons() {
  const buttons = [];

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

  return buttons;
}

const btns = createButtons();
btns[0](); // "Button 3" - 不是我们想要的！
btns[1](); // "Button 3"
btns[2](); // "Button 3"

// 解决方案 1 - 使用 let
function createButtonsFixed() {
  const buttons = [];

  for (let i = 0; i < 3; i++) {
    // 使用 let
    buttons.push(function () {
      console.log("Button " + i);
    });
  }

  return buttons;
}

const fixedBtns = createButtonsFixed();
fixedBtns[0](); // "Button 0" ✓
fixedBtns[1](); // "Button 1" ✓
fixedBtns[2](); // "Button 2" ✓

常见问题与误区

误区 1: 认为代码块总是创建新作用域

只有使用 let 或 const 时，代码块才会创建新的作用域。var 声明的变量不受代码块限制。

{
  var x = 10;
  let y = 20;
}

console.log(x); // 10 - var 可以访问
console.log(y); // ReferenceError - let 不可访问

误区 2: 内层作用域可以修改外层变量

虽然内层作用域可以访问外层变量，但要注意同名变量的"遮蔽"（shadowing）效果：

let value = "outer";

function test() {
  let value = "inner"; // 这是一个新变量，遮蔽了外层的 value
  console.log(value); // "inner"
}

test();
console.log(value); // "outer" - 外层变量没有被修改

如果真的想修改外层变量，不要重新声明：

let value = "outer";

function test() {
  value = "modified"; // 注意：没有 let/const/var
  console.log(value); // "modified"
}

test();
console.log(value); // "modified" - 外层变量被修改了

误区 3: 函数参数不创建作用域

函数参数也会创建自己的作用域，参数实际上是函数作用域中的局部变量：

function greet(name) {
  // name 是函数作用域中的局部变量
  console.log("Hello, " + name);
}

greet("Bob"); // "Hello, Bob"
console.log(name); // ReferenceError: name is not defined

问题：暂时性死区（Temporal Dead Zone）

使用 let 和 const 时，变量在声明之前无法访问，即使在同一作用域内：

function example() {
  console.log(x); // ReferenceError: Cannot access 'x' before initialization
  let x = 10;
}

example();

这与 var 的行为不同：

function example() {
  console.log(x); // undefined - var 会被提升
  var x = 10;
}

example();

var 声明会被提升到作用域顶部，但赋值不会。而 let 和 const 虽然也会被提升，但在声明之前的区域被称为"暂时性死区"，访问会报错。

最佳实践

1. 优先使用 let 和 const

现代 JavaScript 开发中，应该优先使用 let 和 const，避免使用 var：

• 使用 const 声明不会重新赋值的变量
• 使用 let 声明需要重新赋值的变量
• 避免使用 var

// 推荐
const API_URL = "https://api.example.com"; // 不会改变
let count = 0; // 会改变

// 不推荐
var endpoint = "https://api.example.com";
var total = 0;

2. 尽可能缩小变量的作用域

变量应该在最小的作用域内声明，这样可以提高代码的可读性和可维护性：

// 不好 - 作用域过大
function processData(items) {
  let result;
  let temp;
  let i;

  for (i = 0; i < items.length; i++) {
    temp = items[i] * 2;
    result = temp + 10;
    console.log(result);
  }
}

// 更好 - 作用域最小化
function processData(items) {
  for (let i = 0; i < items.length; i++) {
    const temp = items[i] * 2;
    const result = temp + 10;
    console.log(result);
  }
}

3. 避免不必要的全局变量

全局变量应该尽量少，必要时可以使用对象或模块来组织相关的全局数据：

// 不好 - 多个全局变量
var appName = "MyApp";
var appVersion = "1.0.0";
var appAuthor = "John Doe";

// 更好 - 使用对象封装
const AppConfig = {
  name: "MyApp",
  version: "1.0.0",
  author: "John Doe",
};

小结

作用域是 JavaScript 中最基本也是最重要的概念之一。它就像一个访问控制系统，决定了程序的哪些部分可以访问哪些变量。理解作用域的工作原理，能够帮助你：

• 写出更清晰、更安全的代码
• 避免变量命名冲突
• 有效管理内存
• 理解闭包等高级特性

现代 JavaScript 提供了三种主要的作用域类型：全局作用域、函数作用域和块级作用域。通过合理使用 let 和 const，配合函数和代码块，我们可以精确控制变量的可见性和生命周期。

好的作用域管理不仅让代码更容易理解，也能避免很多潜在的 bug。在后续的章节中，我们将深入学习词法作用域、作用域链、闭包等更高级的概念，这些都是建立在对基本作用域规则的理解之上的。

---