JavaScript - 變量作用域
Hello there, future JavaScript wizards! Today, we're going to embark on an exciting journey into the world of variable scope. Don't worry if you're new to programming – I'll be your friendly guide, and we'll explore this concept together, step by step. So, grab your virtual wands (keyboards), and let's dive in!
JavaScript 變量作用域
變量作用域就像是你變量的遊樂場。它决定了在您的代碼中變量在哪裡是可見的並可以被使用。把它當作是您的變量的“可見範圍”。讓我們從一個簡單的例子開始:
let globalVar = "I'm visible everywhere!";
function sayHello() {
console.log(globalVar);
let localVar = "I'm only visible inside this function!";
console.log(localVar);
}
sayHello();
console.log(globalVar); // This works
console.log(localVar); // This will cause an error
在這個例子中,globalVar
就像是學校裡的明星學生——大家都認識他並且可以和他交談。但 localVar
則更像那個害羞的學生,只有在藝術課(我們的 sayHello
函數)時才會出來。
JavaScript �塊作用域
現在,讓我們來討論塊作用域。在 JavaScript 中,一個塊是由花括號 {}
定義的。使用 let
和 const
聲明的變量是塊作用域的,這意味著它們只在聲明的塊內可見。
if (true) {
let blockScopedVar = "I'm only visible in this block!";
console.log(blockScopedVar); // This works
}
console.log(blockScopedVar); // This will cause an error
把塊作用域想像成一個秘密俱樂部。只有俱樂部內的酷孩子(變量)才知道秘密握手(可以訪問變量)。
JavaScript 函數作用域
函數作用域就像是您的變量的私人房間。在任何函數內聲明的變量只在那個函數內可訪問。我們來看一個例子:
function outer() {
let outerVar = "I'm in the outer function!";
function inner() {
let innerVar = "I'm in the inner function!";
console.log(outerVar); // This works
console.log(innerVar); // This works
}
inner();
console.log(outerVar); // This works
console.log(innerVar); // This will cause an error
}
outer();
在這裡,outerVar
就像是一個父母,可以窺視他們孩子的房間(inner
函數),但孩子的玩具(innerVar
)則留在孩子的房間內。
JavaScript 局部作用域
局部作用域指的是只在代碼的特定部分可訪問的變量。這可以是在一個函數內(函數作用域)或一個塊內(塊作用域)。我們來看一個更複雜的例子:
let globalVar = "I'm global!";
function outerFunction() {
let outerVar = "I'm from the outer function!";
if (true) {
let blockVar = "I'm from the block!";
var functionVar = "I'm visible throughout the function!";
console.log(globalVar); // Works
console.log(outerVar); // Works
console.log(blockVar); // Works
console.log(functionVar); // Works
}
console.log(globalVar); // Works
console.log(outerVar); // Works
console.log(functionVar); // Works
console.log(blockVar); // Error!
}
outerFunction();
console.log(globalVar); // Works
console.log(outerVar); // Error!
console.log(functionVar); // Error!
console.log(blockVar); // Error!
這個例子就像是一次大家庭聚會。globalVar
是大家都認識的祖父母。outerVar
像是一個父母,在 outerFunction
家庭中被認識。blockVar
是那個只在某一個房間(if
塊)出現的害羞表親。functionVar
,使用 var
聲明,是那個在函數內到處都聽得見的嘈雜叔叔。
現在,讓我們總結一下不同類型的變量聲明及其作用域:
聲明 | 作用域 | 變量提升 | 可重新賦值 |
---|---|---|---|
var | 函數 | 是 | 是 |
let | 塊 | 否 | 是 |
const | 塊 | 否 | 否 |
記住,var
是那個老派的酷孩子,有點不可預測。let
和 const
則是那個遵守規則的新孩子。
理解變量作用域在 JavaScript 中至關重要。它幫助您撰寫更乾淨、更高效的代碼,並避免討厭的錯誤。總是記得在適當的作用域聲明您的變量,並注意您試圖訪問它們的位置。
當我們結束這堂課時,把您的代碼想像成一個組織良好的城市。全局變量是所有人都可以參觀的公共公園。函數作用域像是具有不同樓層(塊)的建築,每個樓層都有自己的房間(局部作用域)。通過將您的變量放在它們正確的“家”中,您將創造一個和諧且運作良好的 JavaScript 城市!
持續練習,不久您將成為變量作用域的大師。下次見,快樂編程!
Credits: Image by storyset