5.1 全局作用域
作用域 (scopes) 决定了变量和函数在程序不同部分的可访问性。在 JavaScript 中,有三种主要类型的作用域:全局、局部和块级。理解这些作用域对于有效管理数据和防止代码错误很重要。
全局作用域 包括所有在函数或代码块之外声明的变量和函数。这些变量和函数可以在代码中的任何地方访问。
示例 1: 声明全局变量
var globalVar = 'I am a global variable';
function showGlobalVar() {
console.log(globalVar); // 访问全局变量
}
showGlobalVar(); // 输出:I am a global variable
console.log(globalVar); // 访问全局变量
示例 2: 全局函数
在这个例子中,变量 globalVar 和函数 globalFunction() 在全局作用域中声明,可以在代码中的任何地方访问。
function globalFunction() {
return 'I am a global function';
}
console.log(globalFunction()); // 输出:I am a global function
5.2 局部作用域
局部作用域 包括在函数内声明的变量和函数。这些变量和函数只能在该函数内访问,在函数外部不可访问。
示例 3: 声明局部变量
在这个例子中,变量 localVar 在函数 localScopeExample() 内声明,不能在该函数外部访问:
function localScopeExample() {
var localVar = 'I am a local variable';
console.log(localVar); // 访问局部变量
}
localScopeExample(); // 输出:I am a local variable
console.log(localVar); // 错误: localVar 未定义
示例 4: 局部函数
在这个例子中,函数 innerFunction() 在函数 outerFunction() 内声明,在 outerFunction() 外不能访问:
function outerFunction() {
function innerFunction() {
return 'I am a local function';
}
console.log(innerFunction()); // 访问局部函数
}
outerFunction(); // 输出:I am a local function
console.log(innerFunction()); // 错误: innerFunction 未定义
5.3 块级作用域
块级作用域包括用 let 和 const 在代码块内声明的变量,由 {} 限定。这些变量仅能在该块内访问,块外无法访问。
示例 5: 用 let 声明变量
在这个例子中,变量 blockVar 在 if 块内声明,不能在该块外部访问:
if (true) {
let blockVar = 'I am a block-scoped variable';
console.log(blockVar); // 访问块级变量
}
console.log(blockVar); // 错误: blockVar 未定义
示例 6: 用 const 声明变量
在这个例子中,变量 i 在 for 块内声明,不能在该块外部访问:
for (const i = 0; i < 3; i++) {
console.log(i); // 访问块级变量
}
console.log(i); // 错误: i 未定义
块级作用域的特性
示例 7: 嵌套块
在这个例子中,变量 innerVar 只能在内部块内访问,变量 outerVar 可以在外部和内部块中访问:
if (true) {
let outerVar = 'I am in the outer block';
if (true) {
let innerVar = 'I am in the inner block';
console.log(outerVar); // 访问外部块变量
console.log(innerVar); // 访问内部块变量
}
console.log(outerVar); // 访问外部块变量
console.log(innerVar); // 错误: innerVar 未定义
}
5.4 不同作用域的交互
示例 8: 全局和局部作用域的交互
在这个例子中,函数 scopeExample() 可以访问全局变量 globalVar 和它的局部变量 localVar:
var globalVar = 'I am a global variable';
function scopeExample() {
var localVar = 'I am a local variable';
console.log(globalVar); // 访问全局变量
console.log(localVar); // 访问局部变量
}
scopeExample(); // 输出:I am a global variable
// I am a local variable
console.log(globalVar); // 访问全局变量
console.log(localVar); // 错误: localVar 未定义
示例 9: 带箭头函数的作用域
在这个例子中,箭头函数 arrowFunction() 可以访问全局变量 globalVar 和它的局部变量 localVar:
let globalVar = 'I am a global variable';
const arrowFunction = () => {
let localVar = 'I am a local variable in arrow function';
console.log(globalVar); // 访问全局变量
console.log(localVar); // 访问局部变量
};
arrowFunction(); // 输出:I am a global variable
// I am a local variable in arrow function
console.log(globalVar); // 访问全局变量
console.log(localVar); // 错误: localVar 未定义
GO TO FULL VERSION