Day 9：圖解變數作用域(Scope)

前幾天的文章談到各種等級的 Scope 效果。
懶人包支援：
在 JavaScript 裡，有 3 種等級的作用域： 1. 香港喜劇天王星爺——Function Level Scope 2. 國際巨星阿湯哥——Global Level Scope 3. 住在隔壁號稱歌神的里長阿伯——Block Level Scope (ES6)
不同情境下各種 Scope 如何作用，有時光靠文字描述仍略覺模糊。
尤其同樣在主程式宣告，使用 let 和 const 產生的變數是 Block Scope，使用 var 產生的變數是 Global Scope 這一段，相對不易理解。
俗話說一張圖勝過千言萬語，這篇文章的目標是將不同 Scope 的情境用圖解的方式說明，希望讓 Scope 一目瞭然。
圖解之旅行前說明
上面這張圖代表我們一般撰寫 JavaScript 程式的程式結構。
我們會在主程式區——正式一點的名稱為全域執行環境 (Global Execution Context) ——開始撰寫程式 (意即程式碼不在任何函數內)。
過程中會用到如 if-else 或 for loop，形成一個個 Block (如 Block A、Block B)。
漸漸地，我們會把一些程式片段包裝成函數，形成 Function 區塊 (如 myFunc1()、myFunc2())，而函數內又可能再形成小 Block。
對應到實際的程式碼，會類似以下：
/* Global Execution Context (outside of any function) */
var i;
console.log(i);
​
// Block A
if(true){
    .......
}
​
// Block B
for( i = 0 ; i < 5 ; i ++){
    .......
}
​
​
function myFunc1(){
    ..........
    // Block C
    if(true){
        ........
    }
    // Block D
    if(true){
        .........
    }    
}
​
function myFunc2(){
    ..........
    // Block E
    if(true){
        ........
    }
    // Block F
    if(true){
        .........
    }    
}
以下會用實際的程式碼情境，配合程式結構圖片來說明各種 Scope 的有效範圍。
Example 1：宣告在 Function 內 (使用 var、let、const 都一樣)
function myFunc(){
    var n1 = "OneJar";
    console.log("myFunc(): typeof n1=", typeof n1, " value=", n1);
}
​
myFunc();
console.log("Global: typeof n1=", typeof n1); // 這裡 n1 只能印 type 不能印值，否則會拋 `ReferenceError: n1 is not defined`
執行結果：
myFunc(): n1= OneJar
Global: typeof n1= undefined
紅色是 n1 宣告的地方，淺藍色部分就是 n1 的 Scope。
基本 Function Scope。
只有在自己這個 function 內有效，包含 function 內的子 Block。
別的 function 不認得。
主程式區也不認得。
Example 2：宣告在主程式區 (使用 var)
function myFunc(){
    console.log("myFunc(): n1=", n1);
    console.log("myFunc(): this.n1=", this.n1);
    console.log("myFunc(): window.n1=", window.n1);
}
​
var n1 = "OneJar";
myFunc();
console.log("Global: n1=", n1);
執行結果：
myFunc(): n1= OneJar
myFunc(): this.n1= OneJar
myFunc(): window.n1= OneJar
Global: n1= OneJar
n1 使用 var 宣告在主程式區，會存放在 Global Object 裡，屬於 Global 變數。
主程式區內的所有子 Block 和函數都認得。
Example 3：宣告在主程式區 (使用 let 或 const)
function myFunc(){
    console.log("myFunc(): n1=", n1);
    console.log("myFunc(): this.n1=", this.n1);
    console.log("myFunc(): window.n1=", window.n1);
}
​
let n1 = "OneJar";
myFunc();
console.log("Main: n1=", n1);
執行結果：
myFunc(): n1= OneJar
myFunc(): this.n1= undefined
myFunc(): window.n1= undefined
Main: n1= OneJar
可和 Example 2 比較。
在執行時，主程式區會被 JavaScript 包裝成一個 Function 去執行 (圖中隱藏的 Main())。
所以變數 n1 不會成為 Global Scope，而是 Function Scope / Block Scope。
Example 4：賦值給未宣告的變數，所自動產生的全域變數
function myFunc(){
    n1 = "OneJar";  // 自動變成一個 Global 變數
    console.log("myFunc(): n1=", n1);
    console.log("myFunc(): this.n1=", this.n1);
    console.log("myFunc(): window.n1=", window.n1);
}
​
myFunc();
console.log("Global: n1=", n1);
執行結果：
myFunc(): n1= OneJar
myFunc(): this.n1= OneJar
myFunc(): window.n1= OneJar
Global: n1= OneJar
紫色代表 n1 = "OneJar"，也就是沒有宣告就對 n1 賦值的地方。
雖然賦值的地方是在 function 內，但因為沒有先宣告，JavaScript 的行為會自動將 n1 產生為 Global 變數，所以變成 Global Scope。
Example 5：Global 和 Function 內同時存在同名變數 (使用 var、let、const 都一樣)
function myFunc(){
    var n1 = "Stephen Chow";
    console.log("myFunc(): n1=", n1);
    console.log("myFunc(): this.n1=", this.n1);
    console.log("myFunc(): window.n1=", window.n1);
}
​
var n1 = "Tom Cruise";
myFunc();
console.log("Global: n1=", n1);
執行結果：
myFunc(): n1= Stephen Chow
myFunc(): this.n1= Tom Cruise
myFunc(): window.n1= Tom Cruise
Global: n1= Tom Cruise
紅色是 var n1 = "Tom Cruise"，宣告在主程式區，屬於 Global Scope。
綠色是 var n1 = "Stephen Chow"，宣告在主程式區，屬於 Function Scope。
淺藍色區域，會生效的是紅色的 n1。
黃色區域，會生效的是綠色的 n1。
Example 6：Block 內使用 var 宣告
if(true){
   var x = 2;
   {
        console.log(x); // 2
   }
   console.log(x); // 2
}
console.log(x); // 2
傳統 var 不支援 Block Scope。
若是宣告在主程式區的 Block，會是 Global Scope (如上圖所示)。
若是宣告在函數內的 Block 內 (例如 Block C 內)，會是 Function Scope。
Example 7：Block 內使用 let 或 const 宣告
if(true){
   let x = 2;
   {
        console.log(x); // 2
   }
   console.log(x); // 2
}
console.log(x); // ReferenceError: x is not defined
可和 Example 6 比較。
使用 let 或 const 宣告變數，支援 Block Scope 效果。
變數 x 只會在被宣告的那個 Block 和其子 Block 被認得。
總結
作用域 (Scope) 在程式設計裡是滿重要的一個概念。
不同程式語言隨著不同特性，可能有不同的 Scope 類型。
例如 Java 是物件導向語言，在物件的成員變數和函式前面會加上 public 或 private 等修飾子來宣告作用域，和 JavaScript 的作用域又是不同的運作原理。
不管是使用哪一種語言開發，都應該注意該語言的作用域運作原理。
References
​W3Schools - JavaScript Scope​

Day 8：var 掰掰 —— ES6 更嚴謹安全的 let 和 const

Day 10：程式也懂電梯向上？ —— Hoisting

Last modified 2yr ago

Copy link

On this page

圖解之旅行前說明

Example 1：宣告在 Function 內 (使用 var、let、const 都一樣)

Example 2：宣告在主程式區 (使用 var)

Example 3：宣告在主程式區 (使用 let 或 const)

Example 4：賦值給未宣告的變數，所自動產生的全域變數

Example 5：Global 和 Function 內同時存在同名變數 (使用 var、let、const 都一樣)

Example 6：Block 內使用 var 宣告

Example 7：Block 內使用 let 或 const 宣告

總結

References

圖解之旅行前說明

Example 1：宣告在 Function 內 (使用 `var`、`let`、`const` 都一樣)

Example 2：宣告在主程式區 (使用 `var`)

Example 3：宣告在主程式區 (使用 `let` 或 `const`)

Example 4：賦值給未宣告的變數，所自動產生的全域變數

Example 5：Global 和 Function 內同時存在同名變數 (使用 `var`、`let`、`const` 都一樣)

Example 6：Block 內使用 `var` 宣告

Example 7：Block 內使用 `let` 或 `const` 宣告

總結

References