[JavaScriptWeird]No.56 let 與 const 的生存範圍

發表於 | 更新於 | 分類於

前言

上一篇提到了在 ES6 之前變數的生存範圍，接著要提到的是於 ES6 時新增加的兩個變數宣告方式：let 與 const 。

let 與 const 的生存範圍

關於變數的作用域 (scope)：

  • ES6 之前作用域的劃分都是以 函式 (function) 來界定
  • ES6 開始則增加了以區塊 (block) 來劃分的方式，其中區塊的表示方式使用大括號 { } 來表示。

而 let 與 const 的作用域就是屬於以 block 來劃分的方式。

作用域以函式 (function) 為劃分的例子

1
2
3
4
5
6
7
8
function test(){  
  var a = 10;  
  if (a === 10){  
    var b = 60;  
  }  
  console.log(b); // 60  
}  
test();

這個例子因為所有的程式都被包覆在 test 函式內，所以 console.log 可以取用變數 b 。

作用域以區塊 (block) 為劃分的例子

使用同一個例子當作對照組

1
2
3
4
5
6
7
8
function test(){  
  var a = 10;  
  if (a === 10){  
    let b = 60;  
  }  
  console.log(b); // b is not defined  
}  
test();

原因是因為「使用 let 、 const 宣告的變數作用域只存活在 { } 中」。

也就是說這個例子中的變數 b 只存活於 if 的 {} 內 。

函式本身也是一個區塊 (block)

1
2
3
4
5
6
7
8
9
function test(){  
  let a = 10;  
  if (a === 10){  
    console.log(a); // 10  
  }  
  console.log(a); // 10  
}  
test()  
console.log(a); // a is not defined

意思就是如果像這樣把變數用 let 宣告在函式內的話，其實跟使用 var 來宣告變數是一樣的。

原來可以這樣用的例子

1
2
3
4
5
6
7
8
function test(){  
  {  
    let a = 10;  
    console.log(a); // 10  
  }  
  console.log(a); // error  
}  
test()

看影片才知道原來可以直接使用 {} 建立一個區塊 (block)，然後這邊得到的結果也與上面提到的觀念一致， {} 外嘗試取用變數 a 是沒辦法的。

0%