3.16 變數可視範圍(scope)

在 javascript/practice 資料夾下，建立 scope.html 來練習。

變數主要分為全域變數、區域變數兩種。

而變數的可視範圍，指的是哪些程式可以存取該變數。所以當宣告了一個變數之後，要能夠區別該變數的 scope。主要分三種：

• 全域範疇(global)：在任何地方皆可存取到。

• 函式範疇(function)：可在函式內存取。

• 區塊範疇(block)：可在區塊內存取，例： if 的大括號、for 迴圈的大括號、while 迴圈的大括號等。

範例 1：先後順序

要先宣告之後，才能使用，否則視為 undefined：

console.log(a); // undefined
var a = 10;

註：若是函式就例外，例如下例還是可以正常執行(因為 Hoisting)：

add();
function add(){
  console.log("加法");
}

範例 2：全域變數

變數使用 var 宣告在函式外的，就是全域變數，然後瀏覽器內建有個全域物件 window，也可印出來觀察，例：

var a = 10; // a 是全域變數
function add_number(){
  a = a + 10; // 這裡的 a 取用到了全域變數
}
add_number();

console.log(a); // 20
console.log(window); // 瀏覽器內建的全域物件 window
console.log(window.a); // 20

範例 3：區域變數

變數宣告在函式內的，就是區域變數，然後在函式內皆可取用(即函式範疇)，例：

var a = 10; // a 是全域變數
function add_number(){
  var x = 5; // x 是函式內的區域變數，可在函式內取用
  console.log(a + x); // 15
}
add_number();

console.log(a); // 10
console.log(x); // 在 console 中出現了 error，因為 x 變數未定義

範例 4：參數是屬區域變數

建議名稱不要相同，以免混洧，例：

var a = 10;
function add_number(a){ // 這裡的 a 是函式內的區域變數
  a = a + 10;
  console.log("函式內 " + a); // 函式內 20
}
add_number(a);

console.log("函式外 " + a); // 函式外 10

儘量避免變數名稱一樣，以免混洧。

範例 5：let 與 const 屬區塊範疇

執行以下兩段程式並比較看看：

情況 1：

var a = 1;

if(a == 1){
  var b = 2;
}

console.log(a+b); // 3

情況 2：

var a = 1;

if(a == 1){
  let b = 2;
}

console.log(a+b); // console 會出現錯誤訊息

結論：

• var 宣告的變數，其實是屬於函式範疇，所以上述情況 1，b 在 if 外的程式也可以取用得到。(這也跟拉升(Hoisting)關念有關。)

• let 宣告的變數，是屬於區塊範疇，也就是情況 2 用大括號包住的那個區域，即 b 變數只存在於大括號中。

再執行以下程式看看：

function test_func(){
  var a = 1; // var 宣告在函式內，故 a 範疇存在於函式中
}

console.log(a); // console 會出現錯誤訊息

經由以下的例子，可以得知常數(const) ABC 跟 let 一樣是屬區塊範疇：

if(true){
  const ABC = 123;
}
console.log(ABC); // console 會出現錯誤訊息

範例 6：迴圈與變數範疇

下例的 i 是全域變數：

for(var i = 0; i < 10; i++){
  console.log(i);
}
console.log("執行完 for 迴圈的 i: " + i); // 執行完 for 迴圈的 i: 10

下例的 i 是區域變數，只存在於 for 迴圈中：

for(let i = 0; i < 10; i++){
  console.log(i);
}
console.log("執行完 for 迴圈的 i: " + i); // console 會出現錯誤訊息