JavaScript Let

ECMAScript 2015

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

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

在 ES2015 之前，JavaScript 只有兩種類型的作用域：全局作用域和函數作用域。

全局作用域

全局（在函數之外）聲明的變量擁有全局作用域。

實例

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

親自試一試

全局變量可以在 JavaScript 程序中的任何位置訪問。

函數作用域

局部（函數內）聲明的變量擁有函數作用域。

實例

// 此處的代碼不可以使用 carName
function 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），請學習我們的提升這一章。

您可以在聲明變量之前就使用它：

實例

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

親自試一試

通過 let 定義的變量不會被提升到頂端。

在聲明 let 變量之前就使用它會導致 ReferenceError。

變量從塊的開頭一直處于“暫時死區”，直到聲明為止：

實例

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