ES6 let和const詳解

前言

本人這是第一次寫文章，記錄一下日常在學習中的一些收穫和感言，這些筆記若是存在錯誤的地方發情告知改正，不勝感激，本人文采不行，輕噴，謝謝。

1. let命令

做用域

ES6 新增了let命令，用來聲明變量。它的用法相似於var，可是所聲明的變量，只在let命令所在的代碼塊內有效。 舉個例子：

for (let i = 0; i < 10; i++) {
  // ...
}

console.log(i);
// undefind
複製代碼

let聲明的變量i 只能在for循環語句中才能被訪問到，在for循環外面訪問不到，因此輸出結果爲undefind 若是將 let 換成 var則輸出結果爲10

另外，for循環還有一個特別之處，就是設置循環變量的那部分是一個父做用域，而循環體內部是一個單獨的子做用域。能夠經過下面的例子進行理解：

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc
複製代碼

上面代碼正確運行，輸出了 3 次abc。這代表函數內部的變量i與循環變量i不在同一個做用域，有各自單獨的做用域。

不存在變量提高

var命令會發生」變量提高「現象，即變量能夠在聲明以前使用，值爲undefined。而let命令則不存在這種現象。

// var 的狀況
console.log(foo); // 輸出undefined
var foo = 2;

// let 的狀況
console.log(bar); // 報錯ReferenceError
let bar = 2;
複製代碼

上面代碼中，變量foo用var命令聲明，會發生變量提高，即腳本開始運行時，變量foo已經存在了，可是沒有值，因此會輸出undefined。變量bar用let命令聲明，不會發生變量提高。這表示在聲明它以前，變量bar是不存在的，這時若是用到它，就會拋出一個錯誤。

上面的例子會報錯是由於形成了暫時性死區

暫時性死區

ES6 明確規定，若是區塊中存在let和const命令，這個區塊對這些命令聲明的變量，從一開始就造成了封閉做用域。凡是在聲明以前就使用這些變量，就會報錯。

typeof x; // ReferenceError
let x;
複製代碼

當出現暫時性死區後，使用typeof都會報錯

ES6 規定暫時性死區和let、const語句不出現變量提高，主要是爲了減小運行時錯誤，防止在變量聲明前就使用這個變量，從而致使意料以外的行爲。這樣的錯誤在 ES5 是很常見的，如今有了這種規定，避免此類錯誤就很容易了。

總之，暫時性死區的本質就是，只要一進入當前做用域，所要使用的變量就已經存在了，可是不可獲取，只有等到聲明變量的那一行代碼出現，才能夠獲取和使用該變量。

不容許重複聲明

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

// 報錯
function func() {
  let a = 10;
  var a = 1;
}
複製代碼

2. 塊級做用域

ES5 只有全局做用域和函數做用域，沒有塊級做用域，這帶來不少不合理的場景。 第一種場景，內層變量可能會覆蓋外層變量。

var tmp = new Date();

function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}

f();  // undefind
複製代碼

由於在函數中聲明瞭tmp,雖然沒有執行，可是它觸發了變量聲明提高，因此在函數內的最前面好像是加上了var tmp;這段代碼，因此最終結果是undefined。若是將上面的代碼修改成以下：

var tmp = new Date();

function f() {
  console.log(tmp);
  if (false) {
    let tmp = 'hello world';
  }
}

f();  // 輸出當前時間
複製代碼

塊級做用域與函數聲明

ES6 規定，塊級做用域之中，函數聲明語句的行爲相似於let，在塊級做用域以外不可引用。

function f() { console.log('I am outside!'); }

(function () {
  if (false) {
    // 重複聲明一次函數f
    function f() { console.log('I am inside!'); }
  }

  f();
}());
複製代碼

上面的代碼在ES5瀏覽器和ES6瀏覽器的運行結果是不同的，在 ES5 中運行，會獲得「I am inside!」，由於在if內聲明的函數f會被提高到函數頭部，實際運行的代碼以下。

// ES5 環境
function f() { console.log('I am outside!'); }

(function () {
  function f() { console.log('I am inside!'); }
  if (false) {
  }
  f();
}());
複製代碼

ES6 就徹底不同了，理論上會獲得「I am outside!」。由於塊級做用域內聲明的函數相似於let，對做用域以外沒有影響。可是，若是你真的在 ES6 瀏覽器中運行一下上面的代碼，是會報錯的，這是爲何呢？

原來，若是改變了塊級做用域內聲明的函數的處理規則，顯然會對老代碼產生很大影響。爲了減輕所以產生的不兼容問題，ES6 在附錄 B裏面規定，瀏覽器的實現能夠不遵照上面的規定，有本身的行爲方式。

• 容許在塊級做用域內聲明函數。
• 函數聲明相似於var，即會提高到全局做用域或函數做用域的頭部。
• 同時，函數聲明還會提高到所在的塊級做用域的頭部。

注意，上面三條規則只對 ES6 的瀏覽器實現有效，其餘環境的實現不用遵照，仍是將塊級做用域的函數聲明看成let處理。 根據這三條規則，在瀏覽器的 ES6 環境中，塊級做用域內聲明的函數，行爲相似於var聲明的變量。

// 瀏覽器的 ES6 環境
function f() { console.log('I am outside!'); }

(function () {
  if (false) {
    // 重複聲明一次函數f
    function f() { console.log('I am inside!'); }
  }

  f();
}());
// Uncaught TypeError: f is not a function
複製代碼

上面的代碼在符合 ES6 的瀏覽器中，都會報錯，由於實際運行的是下面的代碼。

// 瀏覽器的 ES6 環境
function f() { console.log('I am outside!'); }
(function () {
  var f = undefined;
  if (false) {
    function f() { console.log('I am inside!'); }
  }

  f();
}());
// Uncaught TypeError: f is not a function
複製代碼

考慮到環境致使的行爲差別太大，應該避免在塊級做用域內聲明函數。若是確實須要，也應該寫成函數表達式，而不是函數聲明語句。

// 函數聲明語句
{
  let a = 'secret';
  function f() {
    return a;
  }
}

// 函數表達式
{
  let a = 'secret';
  let f = function () {
    return a;
  };
}
複製代碼

const命令

• const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。
• const的做用域與let命令相同：只在聲明所在的塊級做用域內有效。
• const聲明的變量不得改變值
• const命令聲明的常量也是不提高，一樣存在暫時性死區，只能在聲明的位置後面使用

本質

const實際上保證的，並非變量的值不得改動，而是變量指向的那個內存地址所保存的數據不得改動。對於簡單類型的數據（數值、字符串、布爾值），值就保存在變量指向的那個內存地址，所以等同於常量。但對於複合類型的數據（主要是對象和數組），變量指向的內存地址，保存的只是一個指向實際數據的指針，const只能保證這個指針是固定的（即老是指向另外一個固定的地址），至於它指向的數據結構是否是可變的，就徹底不能控制了。所以，將一個對象聲明爲常量必須很是當心。

const foo = {};

// 爲 foo 添加一個屬性，能夠成功
foo.prop = 123;
foo.prop // 123

// 將 foo 指向另外一個對象，就會報錯
foo = {}; // TypeError: "foo" is read-only
複製代碼

上面代碼中，常量foo儲存的是一個地址，這個地址指向一個對象。不可變的只是這個地址，即不能把foo指向另外一個地址，但對象自己是可變的，因此依然能夠爲其添加新屬性。

若是真的想將對象凍結，應該使用Object.freeze方法。

const foo = Object.freeze({});

// 常規模式時，下面一行不起做用；
// 嚴格模式時，該行會報錯
foo.prop = 123;
複製代碼

除了將對象自己凍結，對象的屬性也應該凍結。下面是一個將對象完全凍結的函數。

var constantize = (obj) => {
  Object.freeze(obj);
  Object.keys(obj).forEach( (key, i) => {
    if ( typeof obj[key] === 'object' ) {
      constantize( obj[key] );
    }
  });
};
複製代碼

結語

本文章大部份內容都是參考的阮一峯大神的ECMAScript 6 入門(http://es6.ruanyifeng.com/#docs/let) 本文章若是有不清楚的地方煩請參考阮一峯大神的大做，本文章只是本人的一個筆記而已。若是您以爲本文對你有幫助，煩請點個贊，給我一點點鼓勵，我之後也會多多更新文章，記錄本身的成長曆程。