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 is not defined
範例 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 is not defined
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 is not defined
範例 6: 使用 const 宣告變數
在這個例子中，變數 i 在 for 區塊內部宣告，在區塊外無法訪問：
for (const i = 0; i < 3; i++) {
console.log(i); // 訪問區塊變數
}
console.log(i); // 錯誤: i is not defined
區塊作用域的特點
範例 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 is not defined
}
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 is not defined
範例 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 is not defined
GO TO FULL VERSION