var與let宣告變數的區別

使用var可以宣告一個變數，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼
var webName="螞蟻部落";

上述程式碼通過var宣告一個變數，並賦值"螞蟻部落"。

ES2015新增let命令，它也可以宣告一個變數。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let webName="螞蟻部落";
console.log(webName);

程式碼執行效果截圖如下：

雖然兩者都可以宣告變數，但是區別還是很大的，下面通過程式碼例項做一下介紹。

關於let命令的更多內容可以參閱JavaScript let 命令一章節。

一.let沒有變數前置現象：

使用var宣告變數具有前置現象，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
console.log(webName);
var webName="螞蟻部落";

程式碼執行效果截圖如下：

關於變數宣告前置現象可以參閱JavaScript 變數與函式宣告前置一章節。

再來看使用let宣告的變數，程式碼如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
console.log(webName);
let webName="螞蟻部落";

程式碼執行效果截圖如下：

由此可見let宣告變數沒有前置效果。

二.let在全域性作用域宣告變數不能用全域性物件引用：

在全域性作用域使用var宣告的變數在某種程度可以認為它是全域性物件的屬性。

所以可以使用全域性物件引用它，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var webName="螞蟻部落";
console.log(window.webName);

程式碼執行效果截圖如下：

但是使用let宣告的變數不可以，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let webName="螞蟻部落";
console.log(window.webName);

程式碼執行效果截圖如下：

三.let宣告變數受限於塊級作用域：

關於塊級作用域的概念可以參閱JavaScript 塊級作用域一章節。

ES2015新增塊級作用域概念，但是它對var宣告的變數沒有作用。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
if(true){
    var webName="螞蟻部落";
}
console.log(webName);

程式碼執行效果截圖如下：

再來看let宣告變數的表現，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
if(true){
    let webName="螞蟻部落";
}
console.log(webName);

程式碼執行效果截圖如下：

如果let宣告變數處於塊級作用域內，那麼此變數的作用範圍就是此塊級作用域。

四.let命令不允許重複宣告：

var是一個比較寬鬆的命令，它允許重複宣告多個同名變數。

後面的會覆蓋前面的，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var webName="螞蟻部落";
var webName="百度";
var webName="李彥宏";
console.log(webName);

程式碼執行效果截圖如下：

上面程式碼宣告瞭三個同名變數webName，當然還可以再多。

沒有問題，var允許這麼做，但是let命令就沒有這麼寬容了，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let webName="螞蟻部落";
let webName="百度";
console.log(webName);

程式碼執行效果截圖如下：

程式碼報錯，因為變數被重複宣告，再來看一段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let webName="螞蟻部落";
if(true){
  let webName="百度";
}
console.log(webName);

程式碼執行效果截圖如下：

上面程式碼完全沒有問題，不是不允許出現重名變數，而是不允許在同一作用域宣告重名變數。

五.let宣告變數會形成暫時性死區：

暫時性死區（temporal dead zone）概念在MDN出現，但是ES2015文件並沒有找到明確的定義。

假定這個概念存在，那麼從變數宣告所在的作用域頂端到變數宣告這塊區域就是暫時性死區。

在這個區域內，該變數不能被使用，總結來說，let宣告變數，必須先宣告再使用。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let webName = "螞蟻部落";
if (true) {
  webName = "百度";
  let webName;
}

程式碼執行效果截圖如下：

在塊級作用域宣告變數webName，那麼此區域性變數會繫結所在塊級作用域。

此作用域中，變數宣告之前使用此變數會報錯，也不會受到上層作用域同名變數的影響。