ES6學習筆記（一）新的變量定義命令let和const
1.一些歷史
ES6（ECMAScript 6.0）是 JavaScript 語言的新一代標準，於2015 年 6 月正式發布，距今已經4年了，它的目標，是使得 JavaScript 語言可以用來編寫復雜的大型應用程序，成為企業級開發語言。
而我們現在所廣泛使用的ES5版的JavaScript其實是ECMAScript 3.1改名的，因為ES4未通過審核，掛了。ES6於2000年開始積累，15年後正式發布，是一個歷史性的重大變革。
支持ES6的瀏覽器據說已經超過90%，當然Node的支持最好，所以作為一個Node使用者，學習一下還是很有必要的，對於不支持ES6的環境可以使用Bable、Traceur等轉碼器轉為ES5，我的天哪。
2.let命令
2.1基本用法
let修改了原本塊中(就是一個{ })var定義的變量為全局的這一屬性，現在let a = 2只能在定義的塊中使用了，主要好處比如for循環的時候，不用再費力的使用閉包來解決了。
另外，for循環還有一個特別之處，就是設置循環變量的那部分是一個父作用域，而循環體內部是一個單獨的子作用域。
1 for (let i = 0; i < 3; i++) { 2 let i = ‘abc‘; 3 console.log(i); 4 } 5 // abc 6 // abc 7 // abc
上面代碼正確運行，輸出了 3 次abc。這表明函數內部的變量i
i不在同一個作用域，有各自單獨的作用域。
2.2不存在變量提升
JS的作用域為詞法環境，以var定義的變量會被預編譯到全局詞法環境，所以變量可以在聲明之前使用，值為undefined，let命令改變了這一語法行為，它所聲明的變量一定要在聲明後使用，否則報錯。
1 // var 的情況 2 console.log(foo); // 輸出undefined 3 var foo = 2; 4 5 // let 的情況 6 console.log(bar); // 報錯ReferenceError 7 let bar = 2;
let是更嚴格一點了，照情靈活使用就好了。
2.3暫時性死區
只要塊級作用域內存在let命令，它所聲明的變量就“綁定”（binding）這個區域，不再受外部的影響。
1 var tmp = 123; 2 3 if (true) { 4 tmp = ‘abc‘; // ReferenceError 5 let tmp; 6 }
上面代碼中，存在全局變量tmp，但是塊級作用域內let又聲明了一個局部變量tmp，導致後者綁定這個塊級作用域，所以在let聲明變量前，對tmp賦值會報錯。但是如果使用var卻會覆蓋前面的聲明，值為abc
ES6 明確規定，如果區塊中存在let和const命令，這個區塊對這些命令聲明的變量，從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變量，就會報錯。
總之，在代碼塊內，使用let命令聲明變量之前，該變量都是不可用的。這在語法上，稱為“暫時性死區”（temporal dead zone，簡稱 TDZ）。
註意：“暫時性死區”也意味著typeof不再是一個百分之百安全的操作。
1 typeof x; // ReferenceError 2 let x;
上面代碼中，變量x使用let命令聲明，所以在聲明之前，都屬於x的“死區”，只要用到該變量就會報錯。因此，typeof運行時就會拋出一個ReferenceError。
而我們常用的typeof判斷類型操作就得小心了。
1 typeof undeclared_variable // "undefined"
上面代碼中，undeclared_variable是一個不存在的變量名，結果返回“undefined”。所以，在沒有let之前，typeof運算符是百分之百安全的，永遠不會報錯。現在這一點不成立了。這樣的設計是為了讓大家養成良好的編程習慣，變量一定要在聲明之後使用，否則就報錯。
另外，下面的代碼也會報錯，與var的行為不同。
1 // 不報錯 2 var x = x; 3 4 // 報錯 5 let x = x; 6 // ReferenceError: x is not defined
上面代碼報錯，也是因為暫時性死區。使用let聲明變量時，只要變量在還沒有聲明完成前使用，就會報錯。上面這行就屬於這個情況，在變量x的聲明語句還沒有執行完成前，就去取x的值，導致報錯”x 未定義“。
ES6 規定暫時性死區和let、const語句不出現變量提升，主要是為了減少運行時錯誤，防止在變量聲明前就使用這個變量，從而導致意料之外的行為。這樣的錯誤在 ES5 是很常見的，現在有了這種規定，避免此類錯誤就很容易了。
總之，暫時性死區的本質就是，只要一進入當前作用域，所要使用的變量就已經存在了，但是不可獲取，只有等到聲明變量的那一行代碼出現，才可以獲取和使用該變量。
2.4不允許重復聲明
let不允許在相同作用域內，重復聲明同一個變量。
1 // 報錯 2 function func() { 3 let a = 10; 4 var a = 1; 5 } 6 7 // 報錯 8 function func() { 9 let a = 10; 10 let a = 1; 11 }
var 後面的會覆蓋前面的。
因此，不能在函數內部重新聲明參數。
1 function func(arg) { 2 let arg; 3 } 4 func() // 報錯 5 6 function func(arg) { 7 { 8 let arg; 9 } 10 } 11 func() // 不報錯
這些改變就和Java比較像了。
2.5塊級作用域
比如：很diao的一點
1 function f1() { 2 let n = 5; 3 if (true) { 4 let n = 10; 5 } 6 console.log(n); // 5 7 }
上面的函數有兩個代碼塊，都聲明了變量n，運行後輸出 5。這表示外層代碼塊不受內層代碼塊的影響。如果兩次都使用var定義變量n，最後輸出的值才是 10。
ES6 允許塊級作用域的任意嵌套，簡直喪心病狂，花裏胡哨。
1 {{{{{let insane = ‘Hello World‘}}}}};
上面代碼使用了一個五層的塊級作用域。外層作用域無法讀取內層作用域的變量。
1 {{{{ 2 {let insane = ‘Hello World‘} 3 console.log(insane); // 報錯 4 }}}};
內層作用域可以定義外層作用域的同名變量。
1 {{{{ 2 let insane = ‘Hello World‘; 3 {let insane = ‘Hello World‘} 4 }}}};
塊級作用域的出現，實際上使得獲得廣泛應用的立即執行函數（自調函數）表達式（IIFE）不再必要了。
1 // IIFE 寫法 2 (function () { 3 var tmp = ...; 4 ... 5 }()); 6 7 // 塊級作用域寫法 8 { 9 let tmp = ...; 10 ... 11 }
也就是說let實現了更精細的封裝。
2.6塊級作用域與函數聲明
1 // 情況一 2 if (true) { 3 function f() {} 4 } 5 6 // 情況二 7 try { 8 function f() {} 9 } catch(e) { 10 // ... 11 }
據說，上面兩種函數聲明，根據 ES5 的規定都是非法的，然而。。。
ES6 引入了塊級作用域，明確允許在塊級作用域之中聲明函數。ES6 規定，塊級作用域之中，函數聲明語句的行為類似於let，在塊級作用域之外不可引用。
好吧，這下官方承認了。
但是瀏覽器太多了，不像node只有一個，導致不同的瀏覽器支持不同，考慮到環境導致的行為差異太大，應該避免在塊級作用域內聲明函數。如果確實需要，也應該寫成函數表達式，而不是函數聲明語句。
1 // 函數聲明語句 2 { 3 let a = ‘secret‘; 4 function f() { 5 return a; 6 } 7 } 8 9 // 函數表達式 10 { 11 let a = ‘secret‘; 12 let f = function () { 13 return a; 14 }; 15 }
另外，還有一個需要註意的地方。ES6 的塊級作用域允許聲明函數的規則，只在使用大括號的情況下成立，如果沒有使用大括號，就會報錯。
1 // 不報錯 2 ‘use strict‘; 3 if (true) { 4 function f() {} 5 } 6 7 // 報錯 8 ‘use strict‘; 9 if (true) 10 function f() {}
3.const命令
3.1基本用法
const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。就像Java的finaly。const一旦聲明變量，就必須立即初始化，不能留到以後賦值。const的作用域與let命令相同：只在聲明所在的塊級作用域內有效。const命令聲明的常量也是不提升，同樣存在暫時性死區，只能在聲明的位置後面使用。const聲明的常量，也與let一樣不可重復聲明。
3.2const的本質
const實際上保證的，並不是變量的值不得改動，而是變量指向的那個內存地址所保存的數據不得改動。- 對於簡單類型的數據（數值、字符串、布爾值），值就保存在變量指向的那個內存地址，因此等同於常量。
- 但對於復合類型的數據（主要是對象和數組），變量指向的內存地址，保存的只是一個指向實際數據的指針，
const只能保證這個指針是固定的（即總是指向另一個固定的地址），至於它指向的數據結構是不是可變的，就完全不能控制了。因此，將一個對象聲明為常量必須非常小心。
1 const foo = {}; 2 3 // 為 foo 添加一個屬性，可以成功 4 foo.prop = 123; 5 foo.prop // 123 6 7 // 將 foo 指向另一個對象，就會報錯 8 foo = {}; // TypeError: "foo" is read-only
上面代碼中，常量foo儲存的是一個地址，這個地址指向一個對象。不可變的只是這個地址，即不能把foo指向另一個地址，但對象本身是可變的，所以依然可以為其添加新屬性。
數組的例子
1 const a = []; 2 a.push(‘Hello‘); // 可執行 3 a.length = 0; // 可執行 4 a = [‘Dave‘]; // 報錯
上面代碼中，常量a是一個數組，這個數組本身是可寫的，但是如果將另一個數組賦值給a，就會報錯。
如果真的想將對象凍結，應該使用Object.freeze方法。
1 const foo = Object.freeze({}); 2 3 // 常規模式時，下面一行不起作用； 4 // 嚴格模式時，該行會報錯 5 foo.prop = 123;
上面代碼中，常量foo指向一個凍結的對象，所以添加新屬性不起作用，嚴格模式時還會報錯。
3.3.ES6聲明變量的6種方式
ES5 只有兩種聲明變量的方法：var命令和function命令。
ES6 除了添加let和const命令，後面章節還會提到，另外兩種聲明變量的方法：import命令和class命令。所以，ES6 一共有 6 種聲明變量的方法。
4.頂層對象的屬性
頂層對象，在瀏覽器環境指的是window對象
在 Node 指的是global對象
ES5 之中，頂層對象的屬性與全局變量是等價的。
1 window.a = 1; 2 a // 1 3 4 a = 2; 5 window.a // 2
上面代碼中，頂層對象的屬性賦值與全局變量的賦值，是同一件事。
頂層對象的屬性與全局變量掛鉤，被認為是 JavaScript 語言最大的設計敗筆之一。
ES6 為了改變這一點，一方面規定，為了保持兼容性，var命令和function命令聲明的全局變量，依舊是頂層對象的屬性；
另一方面規定，let命令、const命令、class命令聲明的全局變量，不屬於頂層對象的屬性。也就是說，從 ES6 開始，全局變量將逐步與頂層對象的屬性脫鉤。
1 var a = 1; 2 // 如果在 Node 的 REPL 環境，可以寫成 global.a 3 // 或者采用通用方法，寫成 this.a 4 window.a // 1 5 6 let b = 1; 7 window.b // undefined
5.global對象
ES5 的頂層對象，本身也是一個問題，因為它在各種實現裏面是不統一的。
- 瀏覽器裏面，頂層對象是
window，但 Node 和 Web Worker 沒有window。 - 瀏覽器和 Web Worker 裏面，
self也指向頂層對象，但是 Node 沒有self。 - Node 裏面，頂層對象是
global，但其他環境都不支持。
同一段代碼為了能夠在各種環境，都能取到頂層對象，現在一般是使用this變量，但是有局限性。
- 全局環境中，
this會返回頂層對象。但是，Node 模塊和 ES6 模塊中，this返回的是當前模塊。 - 函數裏面的
this，如果函數不是作為對象的方法運行，而是單純作為函數運行，this會指向頂層對象。但是，嚴格模式下，這時this會返回undefined。 - 不管是嚴格模式，還是普通模式，
new Function(‘return this‘)()，總是會返回全局對象。但是，如果瀏覽器用了 CSP（Content Security Policy，內容安全策略），那麽eval、new Function這些方法都可能無法使用。
綜上所述，很難找到一種方法，可以在所有情況下，都取到頂層對象。下面是兩種勉強可以使用的方法。
1 // 方法一 2 (typeof window !== ‘undefined‘ 3 ? window 4 : (typeof process === ‘object‘ && 5 typeof require === ‘function‘ && 6 typeof global === ‘object‘) 7 ? global 8 : this); 9 10 // 方法二 11 var getGlobal = function () { 12 if (typeof self !== ‘undefined‘) { return self; } 13 if (typeof window !== ‘undefined‘) { return window; } 14 if (typeof global !== ‘undefined‘) { return global; } 15 throw new Error(‘unable to locate global object‘); 16 };
現在有一個提案，在語言標準的層面，引入global作為頂層對象。也就是說，在所有環境下，global都是存在的，都可以從它拿到頂層對象。墊片庫system.global模擬了這個提案，可以在所有環境拿到global。
1 // CommonJS 的寫法 2 require(‘system.global/shim‘)(); 3 4 // ES6 模塊的寫法 5 import shim from ‘system.global/shim‘; shim();
上面代碼可以保證各種環境裏面，global對象都是存在的。
1 // CommonJS 的寫法 2 var global = require(‘system.global‘)(); 3 4 // ES6 模塊的寫法 5 import getGlobal from ‘system.global‘; 6 const global = getGlobal();
上面代碼將頂層對象放入變量global。
ES6學習筆記（一）新的變量定義命令let和const