let,const來源
ES2015 引入了兩個重要的 JavaScript 新關鍵詞:let 和 const。
這兩個關鍵字在 JavaScript 中提供了塊作用域(Block Scope)變量(和常量)。
在 ES2015 之前,JavaScript 只有兩種類型的作用域:全局作用域和函數作用域(局部變量)。都是通過var聲明
全局作用域
全局(在函數之外)聲明的變量擁有全局作用域。
實例
var carName = "porsche";// 此處的代碼可以使用 carNamefunction myFunction() { // 此處的代碼也可以使用 carName}
函數作用域
局部(函數內)聲明的變量擁有函數作用域。
實例
// 此處的代碼不可以使用 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 關鍵字重新聲明變量會帶來問題。
在塊中重新聲明變量也將重新聲明塊外的變量:
實例
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
var 與let對比
函數作用域
在函數內聲明變量時,使用 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 聲明的變量會提升到頂端。
您可以在聲明變量之前就使用它:
實例
// 在此處,您可以使用 carNamevar carName;
通過 let 定義的變量不會被提升到頂端。
在聲明 let 變量之前就使用它會導致 ReferenceError。
變量從塊的開頭一直處於「暫時死區」,直到聲明為止:
實例
// 在此處,您不可以使用 carNamelet carName;