js代码中的作用域

好的，我们来详细梳理一下 JavaScript 中的变量作用域 (Variable Scope)。

这是一个非常核心的概念，尤其是在 ES6（2015年）引入 let 和 const 之后，理解作用域变得更加重要。

什么是作用域 (Scope)？

简单来说，作用域就是一套规则，用来规定变量和函数在代码中的可访问范围。

你可以把它想象成变量能够“存活”和被访问的“地盘”或“领地”。一旦离开了这个地盘，你就无法访问它了。作用域的主要目的是为了隔离变量，防止不同部分的代码互相冲突（即“命名冲突”）。

在 JavaScript 中，主要有三种作用域：

1. 全局作用域 (Global Scope)
2. 函数作用域 (Function Scope)
3. 块级作用域 (Block Scope)

---

1. 全局作用域 (Global Scope)

在所有函数和代码块 {...} 之外定义的变量，都拥有全局作用域。

• 特点：一旦声明，它在代码的任何地方都可以被访问和修改。
• 在浏览器中：全局作用域的变量会自动成为 window 对象的一个属性。
• 风险：过度使用全局变量会“污染全局命名空间”，容易导致命名冲突和难以追踪的 bug，因此应尽量避免。

示例：

// a 和 myName 都在全局作用域中
var a = 1;
let myName = "Alice";

function sayHello() {
  console.log("Hello, " + myName); // 可以访问 myName
  console.log("a is " + a);         // 可以访问 a
}

sayHello();
console.log(a); // 1

---

2. 函数作用域 (Function Scope)

在函数内部声明的变量，只在该函数内部以及其嵌套的函数中可以访问。

这是由旧的关键字 var 所定义的作用域规则。

• 特点：变量的“地盘”是整个函数体，无论它在函数中的哪个位置声明。

示例：

function doSomething() {
  var message = "I'm inside the function";
  console.log(message); // "I'm inside the function"

  if (true) {
    var age = 30; // 这个 var 变量的作用域是整个 doSomething 函数
  }
  
  console.log(age); // 30, 在 if 块外部仍然可以访问 age
}

doSomething();
// console.log(message); // 报错! ReferenceError: message is not defined
// console.log(age);     // 报错! ReferenceError: age is not defined

---

3. 块级作用域 (Block Scope) - ES6 的重要革新

这是由新的关键字 let 和 const 引入的。

一个“块”(Block) 指的是由花括号 {...} 包围的区域，例如 if 语句、for 循环、while 循环，甚至是一个独立的 {}。

• 特点：用 let 或 const 声明的变量，其“地盘”仅限于它所在的那个代码块 {...} 内部。

示例：

function doSomethingModern() {
  let message = "I'm a modern variable";
  console.log(message);

  if (true) {
    let age = 30; // 这个 let 变量的作用域仅限于这个 if 代码块
    console.log(age); // 30
  }
  
  // console.log(age); // 报错! ReferenceError: age is not defined
}

doSomethingModern();

对比函数作用域和块级作用域，你会发现 let 和 const 提供了更精细、更符合直觉的控制，能有效避免 var 带来的许多问题。

---

var, let, const 的详细对比

特性	var	let	const
作用域	函数作用域	块级作用域	块级作用域
变量提升(Hoisting)	✅ 有 (提升并初始化为undefined)	✅ 有 (但存在“暂时性死区”TDZ)	✅ 有 (但存在“暂时性死区”TDZ)
重复声明	✅ 允许 (在同一作用域内)	❌ 不允许	❌ 不允许
能否重新赋值	✅ 可以	✅ 可以	❌ 不可以 (必须在声明时初始化)

---

重要相关概念

1. 变量提升 (Hoisting)

• var 的提升：在代码执行前，var 声明的变量会被“提升”到其作用域的顶部，并被赋值为 undefined。

  console.log(myVar); // 输出: undefined
  var myVar = 10;
  

• let 和 const 的提升：它们也会被提升，但不会被初始化。在声明行之前访问它们，会进入“暂时性死区 (Temporal Dead Zone, TDZ)”，导致 ReferenceError 报错。这能帮助我们更早地发现错误。

  // console.log(myLet); // 报错! ReferenceError: Cannot access 'myLet' before initialization
  let myLet = 10;
  

2. 作用域链 (Scope Chain)

当代码在一个作用域中查找一个变量时，如果找不到，它会向上一层（父级）作用域继续查找，一层一层往上，直到全局作用域。这个由内到外的查找路径就构成了作用域链。

let globalVar = 'global';

function outer() {
  let outerVar = 'outer';
  
  function inner() {
    let innerVar = 'inner';
    // inner 函数可以访问 innerVar, outerVar, 和 globalVar
    console.log(innerVar + ', ' + outerVar + ', ' + globalVar);
  }
  
  inner();
}
outer();

总结与最佳实践

1. 作用域决定了代码的可访问性，是 JS 的基础骨架。
2. ES6 引入的 let 和 const 提供了块级作用域，这是对 var 的巨大改进。

现代 JavaScript 开发的最佳实践：

• 优先使用 const：对于不打算重新赋值的变量（比如常量、函数引用），默认使用 const，这能增加代码的健壮性。
• 当需要重新赋值时，使用 let：只在确定变量的值需要改变时才使用 let。
• 避免使用 var：在现代前端项目中，几乎没有理由再使用 var。坚持使用 let 和 const 可以让你的代码更清晰、更安全、更易于维护。