js代码中的作用域
好的，我们来详细梳理一下 JavaScript 中的变量作用域 (Variable Scope)。
这是一个非常核心的概念，尤其是在 ES6（2015年）引入 let 和 const 之后，理解作用域变得更加重要。
什么是作用域 (Scope)？
简单来说，作用域就是一套规则，用来规定变量和函数在代码中的可访问范围。
你可以把它想象成变量能够“存活”和被访问的“地盘”或“领地”。一旦离开了这个地盘，你就无法访问它了。作用域的主要目的是为了隔离变量，防止不同部分的代码互相冲突（即“命名冲突”）。
在 JavaScript 中，主要有三种作用域：
- 全局作用域 (Global Scope)
- 函数作用域 (Function Scope)
- 块级作用域 (Block Scope)
1. 全局作用域 (Global Scope)
在所有函数和代码块 {...} 之外定义的变量，都拥有全局作用域。
- 特点：一旦声明，它在代码的任何地方都可以被访问和修改。
- 在浏览器中：全局作用域的变量会自动成为
window对象的一个属性。 - 风险：过度使用全局变量会“污染全局命名空间”，容易导致命名冲突和难以追踪的 bug，因此应尽量避免。
示例：
// a 和 myName 都在全局作用域中
var a = 1;
let myName = "Alice";function sayHello() {console.log("Hello, " + myName); // 可以访问 myNameconsole.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, 和 globalVarconsole.log(innerVar + ', ' + outerVar + ', ' + globalVar);}inner();
}
outer();
总结与最佳实践
- 作用域决定了代码的可访问性，是 JS 的基础骨架。
- ES6 引入的
let和const提供了块级作用域，这是对var的巨大改进。
现代 JavaScript 开发的最佳实践：
- 优先使用
const：对于不打算重新赋值的变量（比如常量、函数引用），默认使用const，这能增加代码的健壮性。 - 当需要重新赋值时，使用
let：只在确定变量的值需要改变时才使用let。 - 避免使用
var：在现代前端项目中，几乎没有理由再使用var。坚持使用let和const可以让你的代码更清晰、更安全、更易于维护。