[JavaScript] 宣告變數 與 作用域

[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()

這樣分出來就清楚多了,這裡的 namechild() 作用域(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

這裡 nameage 非常的容易說明,也可以直接將 ‘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)
}

就可以正常執行了

Facebook 功能: