[JavaScript] 宣告變數 與 作用域

JavaScript 有 兩種 宣告變數 的類型，全域變數（Global Variable）與 區域變數（Local Variable）， 而兩者的差異就是 作用域（scope）

雖然 JavaScript 宣告變數的方式非常的容易，不過對這兩者的 作用域（scope），是需要花點時間去了解的，也是 JavaScript 的基本功：

範例：

function parent(){
 var name = "parent name";
 var age  = 10;

 function child(){
   var name = "child name";
   var childAge = 5;

   // console.log(name,childAge,age) //(1)
 }

 child()

 // console.log(name,childAge,age) //(2)
}

說明 (1)：

我們直接先從 child() 內的 console.log //(1) 來說明：

• name
• childAge
• age

name:

首先會發現，在 parent() 內有兩個名稱為 name 的區域變數，但這邊不需要去想太多，這部分我們把 child 獨立分開來做理解：

 function child(){
   var name = "child name";
   var childAge = 5;

   // console.log(name,childAge,age) //(1)
 }

 child()

這樣分出來就清楚多了，這裡的 name 為 child() 作用域（scope） 裡的區域變數，所以理所當然的這裡的 name 輸出結果為：

"child name"

的字串

childAge:

在這邊跟 name 的原理是一樣的，輸出結果為：

5

這裡不多做說明

age:

這邊因為 child() 的作用域（scope）內，並沒有宣告 age 的區域變數，所以在這邊 console.log(age) 會去向上訪問，訪問到上層，也就是 parent() 的作用域（scope）內名稱為 age 的區域變數，所以其輸出的結果為：

10

另外如果上層的 作用域（scope） 沒有找到其結果，就會繼續往上找，直到 Global 的作用域`，如果都沒有找到會噴出:

Uncaught ReferenceError: a is not defined 的錯誤的

說明（2）：

接著我們改來看 parent() 內的 console.log //(2) ：

• name
• childAge
• age

這裡 name 與 age 非常的容易說明，也可以直接將 ‘parent()’ 與 ‘child()’ 獨立拆開來了解：

function parent(){
 var name = "parent name";
 var age  = 10;

 // console.log(name,childAge,age) //(2)
}

不過 childAge 要特別注意，因為 作用域（scope） 是 沒有辦法向下訪問的，也就是說在 parent() 的作用域（scope）中下：

console.log(childAge) //(2)

是會找不到 childAge 的，所以會噴出 Uncaught ReferenceError: a is not defined 的錯誤的

但如果把 childAge 定義成 全域變數（Global Variable）如下：

function parent(){
 var name = "parent name";
 var age  = 10;

 function child(){
   var name = "child name";
   childAge = 5; //全域變數（Global Variable）

   // console.log(name,childAge,age) //(1)
 }

 child()

 // console.log(name,childAge,age) //(2)
}

就可以正常執行了