JavaScript作用域
在 JavaScript 中，作用域（Scope） 决定了变量、函数和对象的可访问性。理解作用域是掌握 JavaScript 编程的基础。以下是 JavaScript 作用域的详细说明：
1. 作用域的类型
(1) 全局作用域（Global Scope）
- 定义：在函数和代码块之外声明的变量或函数。
- 特点：
- 在整个程序中都可以访问。
- 容易造成命名冲突和变量污染。
示例：
const globalVar = '全局变量';
function test() {
console.log(globalVar); // 输出：全局变量
}
test();
(2) 函数作用域（Function Scope）
- 定义：在函数内部声明的变量或函数。
- 特点：
- 只能在函数内部访问。
- 使用
var声明的变量具有函数作用域。
示例：
function test() {
var localVar = '局部变量';
console.log(localVar); // 输出：局部变量
}
test();
console.log(localVar); // 报错：ReferenceError: localVar is not defined
(3) 块级作用域（Block Scope）
- 定义：在代码块（
{}）内部声明的变量。 - 特点：
- 只能在代码块内部访问。
- 使用
let和const声明的变量具有块级作用域。
示例：
if (true) {
let blockVar = '块级变量';
console.log(blockVar); // 输出：块级变量
}
console.log(blockVar); // 报错：ReferenceError: blockVar is not defined
2. 作用域链（Scope Chain）
- 定义：JavaScript 引擎通过作用域链查找变量。
- 规则：
- 从当前作用域开始查找变量。
- 如果找不到，则向上一级作用域查找，直到全局作用域。
- 如果全局作用域中也没有找到，则抛出
ReferenceError。
示例：
const globalVar = '全局变量';
function outer() {
const outerVar = '外部变量';
function inner() {
const innerVar = '内部变量';
console.log(innerVar); // 输出：内部变量
console.log(outerVar); // 输出：外部变量
console.log(globalVar); // 输出：全局变量
}
inner();
}
outer();
3. 作用域与变量声明
(1) var 的作用域
- 函数作用域：
var声明的变量在函数内部有效。 - 变量提升：
var声明的变量会提升到函数作用域的顶部。
示例：
function test() {
console.log(x); // 输出：undefined（变量提升）
var x = 10;
console.log(x); // 输出：10
}
test();
(2) let 和 const 的作用域
- 块级作用域：
let和const声明的变量在代码块内部有效。 - 暂时性死区：在声明前访问会抛出
ReferenceError。
示例：
if (true) {
console.log(y); // 报错：ReferenceError: Cannot access 'y' before initialization
let y = 20;
console.log(y); // 输出：20
}
4. 作用域的应用场景
(1) 避免全局变量污染
- 使用函数作用域或块级作用域限制变量的可见性。
示例：
(function() {
const localVar = '局部变量';
console.log(localVar); // 输出：局部变量
})();
console.log(localVar); // 报错：ReferenceError: localVar is not defined
(2) 闭包（Closure）
- 函数可以访问其外部作用域的变量，即使外部函数已经执行完毕。
示例：
function outer() {
const outerVar = '外部变量';
return function inner() {
console.log(outerVar); // 输出：外部变量
};
}
const innerFunc = outer();
innerFunc();
总结
| 作用域类型 | 定义 | 特点 | 变量声明 |
|---|---|---|---|
| 全局作用域 | 在函数和代码块之外声明的变量 | 整个程序可访问，易造成变量污染 | var、let、const |
| 函数作用域 | 在函数内部声明的变量 | 仅在函数内部可访问 | var |
| 块级作用域 | 在代码块内部声明的变量 | 仅在代码块内部可访问 | let、const |
理解 JavaScript 的作用域有助于编写更清晰、更健壮的代码，避免变量冲突和意外行为。
更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github
