JavaScript作用域：变量的「地盘」之争

什么是作用域？

想象你在一个大型购物中心逛街，每个店铺都有自己的「经营范围」------有些区域你可以随便逛，有些地方（比如员工休息室）就谢绝入内。JavaScript中的作用域就像这些店铺的「地盘」，它决定了变量能在哪些地方被访问，哪些地方不行。

用一句大白话讲：作用域就是变量的可用范围。

作用域的「门派」

JavaScript中有三种常见的作用域，就像武林中的不同门派，各有各的规矩：

1. 全局作用域：「公共场所」

全局作用域就像购物中心的公共区域（大厅、走廊），在这里声明的变量，整个程序都能访问。

js 复制代码

// 全局作用域
const mallName = "编程购物中心";

function visitStore() {
  // 这里能访问全局变量mallName
  console.log(`欢迎来到${mallName}`);
}

visitStore(); // 输出：欢迎来到编程购物中心

2. 函数作用域：「店铺包间」

函数作用域就像店铺里的私人包间，只有在函数内部才能访问包间里的变量。

js 复制代码

function coffeeShop() {
  // 函数作用域内的变量
  const secretRecipe = "独家咖啡配方";
  console.log(secretRecipe); // 正常输出
}

coffeeShop();
console.log(secretRecipe); // 报错：secretRecipe is not defined

3. 块级作用域：「试衣间」

ES6之后新增的块级作用域（用 let 和 const 声明）就像试衣间，用 {} 包裹的区域都是独立空间。

js 复制代码

if (true) {
  var globalPants = "全局裤子";
  let blockShirt = "块级衬衫";
}

console.log(globalPants); // 输出：全局裤子（var声明不受块级限制）
console.log(blockShirt); // 报错：blockShirt is not defined

作用域链：「找人办事」的规则

当JavaScript找不到某个变量时，会像「找人办事」一样逐级向上查找，这就是作用域链。

html 复制代码

<script>
const globalBoss = "商场老板";

function storeManager() {
  const manager = "店长";

  function salesPerson() {
    const staff = "店员";
    // 查找顺序：staff → manager → globalBoss
    console.log(`${staff} → ${manager} → ${globalBoss}`);
  }

  salesPerson(); // 输出：店员 → 店长 → 商场老板
}

storeManager();
</script>

常见「坑点」与避坑指南

1. var的「变量提升」陷阱

js 复制代码

if (false) {
  var hiddenVar = "我会被提升";
}
console.log(hiddenVar); // 输出：undefined（而不是报错）

✅ 避坑：优先使用 let 和 const ，它们有块级作用域，不会被意外提升。

2. 函数内忘记声明变量

js 复制代码

function badExample() {
  money = 100; // 意外创建全局变量！
}
badExample();
console.log(money); // 输出：100（污染全局作用域）

✅ 避坑：始终用 let / const 声明变量，养成良好习惯。

作用域的「灵魂拷问」

为什么需要作用域？

防止变量名冲突（就像不同店铺可以有同名商品）
提高代码安全性（内部变量不被外部访问）
减少内存占用（函数执行完，内部变量会被销毁）

总结

作用域就像给变量划分「地盘」，理解它能帮你写出更安全、更可维护的代码。记住：

var 声明的变量只有函数作用域，会提升
let / const 声明的变量有块级作用域
变量查找遵循作用域链，从内到外下次写代码时，不妨想想：这个变量的「地盘」在哪里？它能被谁访问？

✨ 小练习：看看下面代码会输出什么？

js 复制代码

const outer = "外部";

function middle() {
  const outer = "中间";
  function inner() {
    console.log(outer);
  }
  inner();
}

middle();

📝 答案：输出中间（作用域链优先查找最近的变量）