let 和 var 在使用中的區別

1、聲明是否提升 

var：變量聲明提升，在聲明語句之前使用變量，不會報錯。

let：變量聲明不提升，在聲明語句之前使用變量，會報錯。

console.log(a); // 1
var a = 1;

console.log(b); //報錯

let b = 2;

 

---

 

2、塊級作用域

var ： 沒有塊級作用域，只有全局作用域和函數作用域。

let ： 具有塊級作用域，在代碼塊中聲明的變量只在該代碼塊中有效。

{
  let a = 1;
  var b = 2;
}

a // 報錯
b // 2

 

2.1   let的暫時性死區

           暫時性死區：temporal dead zone，簡稱 TDZ，即在代碼塊內，使用let命令聲明變量之前，該變量都是不可用的。這在語法上，稱爲“暫時性死區”。

           其實可以預見，暫時性死區形成的原因，可以認爲是let聲明的變量不提升、並具有塊級作用域 兩個特性。

          也即是說，在塊級作用於內，只要用let聲明瞭一個變量，這個變量就綁定了該塊級作用域，作用域內需要使用該變量，就只能在改變量聲明之後使用。如果在該變量聲明之前使用，則會應爲該變量還未聲明而報錯。

 

var temp = 111;

if (true) {
  temp = 'abc'; // 報錯
  let temp;
}

 

---

 

3、重複聲明

         var 聲明的變量可以重複聲明，但let不行，並會報錯。

// 報錯
function func() {
  let a = 1;
  var a = 2;
}

// 報錯
function func() {
  let a = 1;
  let a = 2;
}

 

---

 

補充：

const 與 let  大致相同，只是 const聲明一個只讀的常量，一般將變量名也全部大寫（表示常量），且一旦聲明，常量的值就不能改變。

const PI = 3.1415926;
PI // 3.1415926

PI = 3; //報錯

 

---

 

結：

1、var變量聲明提升，let不提升；

2、var只有全局作用域和函數作用域，let具有塊級作用域且存在暫時性死區；

3、var可以重複聲明變量，let不行。

 

 

參考：

阮一峯 - ECMAScript 6 入門  ：  http://es6.ruanyifeng.com/#docs/let

前端面試題：JS中的let和var的區別 ： https://www.cnblogs.com/fly_dragon/p/8669057.html