ES6的let和var聲明變量的區別

關於let的描述

let容許你聲明一個做用域被限制在塊級中的變量、語句或者表達式。與var關鍵字不一樣的是，它聲明的變量只能是全局或者整個函數塊的。

做用域規則

let聲明的變量只在其聲明的塊或子塊中可用，這一點，與var類似。兩者之間最主要的區別在於var聲明的變量的做用域是整個封閉函數，是全域的 。

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // 一樣的變量!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // 不一樣的變量
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

var存在變量提高現象，而let不存在

• 瀏覽器在運行代碼以前會進行預解析，首先解析函數聲明，定義變量，解析完以後再對函數、變量進行運行、賦值等。 
• 不論var聲明的變量處於當前做用域的第幾行，都會提高到做用域的頭部。 
• var 聲明的變量會被提高到做用域的頂部並初始化爲undefined，而let聲明的變量在做用域的頂部未被初始化。

// var 的狀況
console.log(foo); // 輸出undefined
var foo = 2;
//至關於
var foo;  //聲明且初始化爲undefined
console.log(foo);
foo=2;

// let 的狀況
console.log(bar); // 報錯ReferenceError
let bar = 2;
//至關於在第一行先聲明bar但沒有初始化，直到賦值時才初始化

只要塊級做用域內存在let命令，它所聲明的變量就「綁定」這個區域，再也不受外部的影響。總之，在代碼塊內，使用let命令聲明變量以前，該變量都是不可用的，儘管代碼塊外也存在相同全局變量。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}
alert(tmp);  //輸出值爲123，全局tmp與局部tmp不影響

let不容許在相同做用域內，重複聲明同一個變量。

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

var在相同做用域內，能夠重複聲明同一變量

// 表示從新賦值
function () {
  var a = 10;
  var a = 1;
}

瞭解更多關於let的特性、模仿私有接口、暫存死區等

參考整理來源：

http://www.javashuo.com/article/p-gdgboudm-kq.html