JavaScript Let

ECMAScript 2015

ES2015 引入了兩個重要的 JavaScript 新關鍵詞： let 和  const。

這兩個關鍵字在 JavaScript 中提供了塊作用域（ Block Scope）變數（和常量）。

在 ES2015 之前，JavaScript 只有兩種型別的作用域： 全域性作用域和 函式作用域。

全域性作用域

全域性（在函式之外）宣告的變數擁有 全域性作用域。

例項

var carName = "porsche";// 此處的程式碼可以使用 carNamefunction myFunction() {  // 此處的程式碼也可以使用 carName}

全域性變數可以在 JavaScript 程式中的任何位置訪問。

函式作用域

區域性（函式內）宣告的變數擁有 函式作用域。

例項

// 此處的程式碼不可以使用 carNamefunction myFunction() {  var carName= "porsche";  // code here CAN use carName}// 此處的程式碼不可以使用 carName

區域性變數只能在它們被宣告的函式內訪問。

JavaScript 塊作用域

透過  var 關鍵詞宣告的變數沒有塊 作用域。

在塊  {} 內宣告的變數可以從塊之外進行訪問。

例項

{ 
  var x = 10; 
}// 此處可以使用 x

在 ES2015 之前，JavaScript 是沒有塊作用域的。

可以使用  let 關鍵詞宣告擁有塊作用域的變數。

在塊  {} 內宣告的變數無法從塊外訪問：

例項

{ 
  let x = 10;
}// 此處不可以使用 x

重新宣告變數

使用  var 關鍵字重新宣告變數會帶來問題。

在塊中重新宣告變數也將重新宣告塊外的變數：

例項

var x = 10;// 此處 x 為 10{ 
  var x = 6;  // 此處 x 為 6}// 此處 x 為 6

使用  let 關鍵字重新宣告變數可以解決這個問題。

在塊中重新宣告變數不會重新宣告塊外的變數：

例項

var x = 10;// 此處 x 為 10{ 
  let x = 6;  // 此處 x 為 6}// 此處 x 為 10

瀏覽器支援

Internet Explorer 11 或更早的版本不完全支援  let 關鍵詞。

下表定義了第一個完全支援  let 關鍵詞的瀏覽器版本：

Chrome 49	IE / Edge 12	Firefox 44	Safari 11	Opera 36
2016 年 3 月	2015 年 7 月	2015 年 1 月	2017 年 9 月	2016 年 3 月

迴圈作用域

在迴圈中使用  var：

例項

var i = 7;for (var i = 0; i < 10; i++) {  // 一些語句}// 此處，i 為 10

在迴圈中使用  let：

例項

let i = 7;for (let i = 0; i < 10; i++) {  // 一些語句}// 此處 i 為 7

在第一個例子中，在迴圈中使用的變數使用  var 重新宣告瞭迴圈之外的變數。

在第二個例子中，在迴圈中使用的變數使用  let 並沒有重新宣告迴圈外的變數。

如果在迴圈中用  let 宣告瞭變數 i，那麼只有在迴圈內，變數 i 才是可見的。

函式作用域

在函式內宣告變數時，使用  var 和  let 很相似。

它們都有 函式作用域：

function myFunction() {  var carName = "porsche";   // 函式作用域}function myFunction() {  let carName = "porsche";   // 函式作用域}

全域性作用域

如果在塊外宣告宣告，那麼  var 和  let 也很相似。

它們都擁有 全域性作用域：

var x = 10;       // 全域性作用域let y = 6;       // 全域性作用域

HTML 中的全域性變數

使用 JavaScript 的情況下，全域性作用域是 JavaScript 環境。

在 HTML 中，全域性作用域是 window 物件。

透過  var 關鍵詞定義的全域性變數屬於 window 物件：

例項

var carName = "porsche";// 此處的程式碼可使用 window.carName

透過  let 關鍵詞定義的全域性變數不屬於 window 物件：

例項

let carName = "porsche";// 此處的程式碼不可使用 window.carName

重新宣告

允許在程式的任何位置使用  var 重新宣告 JavaScript 變數：

例項

var x = 10;// 現在，x 為 10 var x = 6;// 現在，x 為 6

在相同的作用域，或在相同的塊中，透過  let 重新宣告一個  var 變數是不允許的：

例項

var x = 10;       // 允許let x = 6;       // 不允許{  var x = 10;   // 允許  let x = 6;   // 不允許}

在相同的作用域，或在相同的塊中，透過  let 重新宣告一個  let 變數是不允許的：

例項

let x = 10;       // 允許let x = 6;       // 不允許{  let x = 10;   // 允許  let x = 6;   // 不允許}

在相同的作用域，或在相同的塊中，透過  var 重新宣告一個  let 變數是不允許的：

例項

let x = 10;       // 允許var x = 6;       // 不允許{  let x = 10;   // 允許  var x = 6;   // 不允許}

在不同的作用域或塊中，透過  let 重新宣告變數是允許的：

例項

let x = 6;       // 允許{  let x = 7;   // 允許}
{  let x = 8;   // 允許}

提升

透過  var 宣告的變數會 提升到頂端。如果您不瞭解什麼是提升（Hoisting），請學習我們的提升這一章。

您可以在宣告變數之前就使用它：

例項

// 在此處，您可以使用 carNamevar carName;

透過  let 定義的變數不會被提升到頂端。

在宣告  let 變數之前就使用它會導致 ReferenceError。

變數從塊的開頭一直處於“暫時死區”，直到宣告為止：

例項

// 在此處，您不可以使用 carNamelet carName;