這篇文章僅記錄了本人在系統(tǒng)性學(xué)習(xí)ES6時，遇到的產(chǎn)生困惑或留意的點信柿，用于以后開發(fā)中的review冀偶。
1.ES6相關(guān)
ECMAScript 和 JavaScript 的關(guān)系是，前者是后者的規(guī)格渔嚷，后者是前者的一種實現(xiàn)（另外的 ECMAScript 方言還有 JScript 和 ActionScript）进鸠。
2011 年，ECMAScript 5.1 版發(fā)布后圃伶，就開始制定 6.0 版了堤如。因此蒲列，ES6 這個詞的原意，就是指 JavaScript 語言的下一個版本搀罢。
1-1.Babel轉(zhuǎn)碼器
Babel 是一個廣泛使用的 ES6 轉(zhuǎn)碼器蝗岖，可以將 ES6 代碼轉(zhuǎn)為 ES5 代碼，從而在老版本的瀏覽器執(zhí)行榔至。這意味著抵赢，你可以用 ES6 的方式編寫程序，又不用擔(dān)心現(xiàn)有環(huán)境是否支持唧取。下面是一個例子铅鲤。
// 轉(zhuǎn)碼前
input.map(item => item + 1);
// 轉(zhuǎn)碼后
input.map(function (item) {
return item + 1;
});
安裝及配置請參考ECMAScript 6簡介
1-2.babel-node
@babel/node模塊的babel-node命令，提供一個支持 ES6 的 REPL 環(huán)境枫弟。它支持 Node 的 REPL 環(huán)境的所有功能邢享，而且可以直接運行 ES6 代碼。
1-3.@babel/register 模塊
@babel/register模塊改寫require命令淡诗，為它加上一個鉤子骇塘。此后，每當(dāng)使用require加載.js韩容、.jsx款违、.es和.es6后綴名的文件，就會先用 Babel 進行轉(zhuǎn)碼。
1-4.polyfill
Babel 默認只轉(zhuǎn)換新的 JavaScript 句法（syntax），而不轉(zhuǎn)換新的 API莹规，比如Iterator、Generator赠尾、Set、Map溢陪、Proxy萍虽、Reflect睛廊、Symbol形真、Promise等全局對象，以及一些定義在全局對象上的方法（比如Object.assign）都不會轉(zhuǎn)碼超全。
舉例來說咆霜，ES6 在Array對象上新增了Array.from方法。Babel 就不會轉(zhuǎn)碼這個方法嘶朱。如果想讓這個方法運行蛾坯，可以使用core-js和regenerator-runtime(后者提供generator函數(shù)的轉(zhuǎn)碼)，為當(dāng)前環(huán)境提供一個墊片疏遏。
1-5瀏覽器環(huán)境
Babel 也可以用于瀏覽器環(huán)境脉课，使用@babel/standalone模塊提供的瀏覽器版本救军，將其插入網(wǎng)頁。
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// Your ES6 code
</script>
注意倘零，網(wǎng)頁實時將 ES6 代碼轉(zhuǎn)為 ES5唱遭，對性能會有影響。生產(chǎn)環(huán)境需要加載已經(jīng)轉(zhuǎn)碼完成的腳本
2.let和const命令
2-1.不存在變量提升
var命令會發(fā)生“變量提升”現(xiàn)象呈驶，即變量可以在聲明之前使用拷泽，值為undefined。
為了糾正這種現(xiàn)象袖瞻，let命令改變了語法行為司致，它所聲明的變量一定要在聲明后使用，否則報錯聋迎。
// var 的情況
console.log(foo); // 輸出undefined
var foo = 2;
// let 的情況
console.log(bar); // 報錯ReferenceError
let bar = 2;
2-2.暫時性死區(qū)
var tmp = 123;
if (true) {
tmp = 'abc'; // ReferenceError
let tmp;
}
在代碼塊內(nèi)脂矫，使用let命令聲明變量之前，該變量都是不可用的霉晕。這在語法上羹唠，稱為“暫時性死區(qū)”（temporal dead zone，簡稱 TDZ）娄昆。
“暫時性死區(qū)”也意味著typeof不再是一個百分之百安全的操作佩微。
typeof x; // ReferenceError
let x;
有些“死區(qū)”比較隱蔽，不太容易發(fā)現(xiàn)萌焰。
function bar(x = y, y = 2) {
return [x, y];
}
bar(); // 報錯
上面代碼中哺眯，調(diào)用bar函數(shù)之所以報錯（某些實現(xiàn)可能不報錯），是因為參數(shù)x默認值等于另一個參數(shù)y扒俯，而此時y還沒有聲明奶卓，屬于“死區(qū)”。如果y的默認值是x撼玄，就不會報錯夺姑，因為此時x已經(jīng)聲明了。
2-3.不允許重復(fù)聲明掌猛。
function func(arg) {
let arg;
}
func() // 報錯
此報錯信息為arg已存在盏浙，意味著無法進行以下操作(可通過es6參數(shù)解構(gòu)解決)。
function run(params) {
let params=params?1:2
}
run() // Uncaught SyntaxError: /Inline Babel script: Identifier 'params' has already been declared
2-4.塊級作用域荔茬。
用來計數(shù)的循環(huán)變量泄露為全局變量废膘。
var s = 'hello';
for (var i = 0; i < s.length; i++) {
console.log(s[i]);
}
console.log(i); // 5
上面代碼中，變量i只用來控制循環(huán)慕蔚，但是循環(huán)結(jié)束后丐黄，它并沒有消失，泄露成了全局變量孔飒。PS：之前從沒有注意過這個問題灌闺。
塊級作用域的出現(xiàn)艰争，實際上使得獲得廣泛應(yīng)用的匿名立即執(zhí)行函數(shù)表達式（匿名 IIFE）不再必要了。
// IIFE 寫法
(function () {
var tmp = ...;
...
}());
// 塊級作用域?qū)懛?{
let tmp = ...;
...
}
2-5.塊級作用域與函數(shù)聲明
function f() { console.log('I am outside!'); }
(function () {
if (false) {
// 重復(fù)聲明一次函數(shù)f
function f() { console.log('I am inside!'); }
}
f();
}());
上面代碼在 ES5 中運行桂对，會得到“I am inside!”园细，因為在if內(nèi)聲明的函數(shù)f會被提升到函數(shù)頭部，實際運行的代碼如下接校。
// ES5 環(huán)境
function f() { console.log('I am outside!'); }
(function () {
function f() { console.log('I am inside!'); }
if (false) {
}
f();
}());
ES6 就完全不一樣了猛频，理論上會得到“I am outside!”。因為塊級作用域內(nèi)聲明的函數(shù)類似于let蛛勉，對作用域之外沒有影響鹿寻。但是，如果你真的在 ES6 瀏覽器中運行一下上面的代碼诽凌，是會報錯的毡熏，這是為什么呢？
// 瀏覽器的 ES6 環(huán)境
function f() { console.log('I am outside!'); }
(function () {
if (false) {
// 重復(fù)聲明一次函數(shù)f
function f() { console.log('I am inside!'); }
}
f();
}());
// Uncaught TypeError: f is not a function
上面的代碼在 ES6 瀏覽器中侣诵，都會報錯痢法。
原來，如果改變了塊級作用域內(nèi)聲明的函數(shù)的處理規(guī)則杜顺，顯然會對老代碼產(chǎn)生很大影響财搁。為了減輕因此產(chǎn)生的不兼容問題，ES6 在附錄 B里面規(guī)定躬络，瀏覽器的實現(xiàn)可以不遵守上面的規(guī)定尖奔，有自己的行為方式。
- 允許在塊級作用域內(nèi)聲明函數(shù)穷当。
- 函數(shù)聲明類似于
var提茁，即會提升到全局作用域或函數(shù)作用域的頭部。 - 同時馁菜，函數(shù)聲明還會提升到所在的塊級作用域的頭部茴扁。
注意，上面三條規(guī)則只對 ES6 的瀏覽器實現(xiàn)有效汪疮，其他環(huán)境的實現(xiàn)不用遵守峭火，還是將塊級作用域的函數(shù)聲明當(dāng)作let處理。
根據(jù)這三條規(guī)則铲咨，瀏覽器的 ES6 環(huán)境中躲胳，塊級作用域內(nèi)聲明的函數(shù)，行為類似于var聲明的變量纤勒。上面的例子實際運行的代碼如下。
// 瀏覽器的 ES6 環(huán)境
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
考慮到環(huán)境導(dǎo)致的行為差異太大隆檀，應(yīng)該避免在塊級作用域內(nèi)聲明函數(shù)摇天。如果確實需要粹湃，也應(yīng)該寫成函數(shù)表達式，而不是函數(shù)聲明語句泉坐。
// 塊級作用域內(nèi)部的函數(shù)聲明語句为鳄，建議不要使用
{
let a = 'secret';
function f() {
return a;
}
}
// 塊級作用域內(nèi)部，優(yōu)先使用函數(shù)表達式
{
let a = 'secret';
let f = function () {
return a;
};
}
另外腕让，還有一個需要注意的地方孤钦。ES6 的塊級作用域必須有大括號，如果沒有大括號纯丸，JavaScript 引擎就認為不存在塊級作用域偏形。
// 第一種寫法，報錯
if (true) let x = 1;
// 第二種寫法觉鼻，不報錯
if (true) {
let x = 1;
}
上面代碼中俊扭，第一種寫法沒有大括號，所以不存在塊級作用域坠陈，而let只能出現(xiàn)在當(dāng)前作用域的頂層萨惑，所以報錯。第二種寫法有大括號仇矾，所以塊級作用域成立庸蔼。
函數(shù)聲明也是如此，嚴格模式下贮匕，函數(shù)只能聲明在當(dāng)前作用域的頂層朱嘴。
// 不報錯
'use strict';
if (true) {
function f() {}
}
// 報錯
'use strict';
if (true)
function f() {}
3.const
3-1.const實際上保證的，并不是變量的值不得改動粗合，而是變量指向的那個內(nèi)存地址所保存的數(shù)據(jù)不得改動萍嬉。
const foo = {};
// 為 foo 添加一個屬性，可以成功
foo.prop = 123;
foo.prop // 123
// 將 foo 指向另一個對象隙疚，就會報錯
foo = {}; // TypeError: "foo" is read-only
上面代碼中壤追，常量foo儲存的是一個地址，這個地址指向一個對象供屉。不可變的只是這個地址行冰，即不能把foo指向另一個地址，但對象本身是可變的伶丐，所以依然可以為其添加新屬性悼做。
下面是另一個例子。
const a = [];
a.push('Hello'); // 可執(zhí)行
a.length = 0; // 可執(zhí)行
a = ['Dave']; // 報錯
上面代碼中哗魂，常量a是一個數(shù)組肛走，這個數(shù)組本身是可寫的，但是如果將另一個數(shù)組賦值給a录别，就會報錯朽色。
如果真的想將對象凍結(jié)邻吞，應(yīng)該使用Object.freeze方法。
const foo = Object.freeze({});
// 常規(guī)模式時葫男，下面一行不起作用抱冷；
// 嚴格模式時，該行會報錯
foo.prop = 123;
上面代碼中梢褐，常量foo指向一個凍結(jié)的對象旺遮，所以添加新屬性不起作用，嚴格模式時還會報錯盈咳。
除了將對象本身凍結(jié)耿眉，對象的屬性也應(yīng)該凍結(jié)。下面是一個將對象徹底凍結(jié)的函數(shù)猪贪。
var constantize = (obj) => {
Object.freeze(obj);
Object.keys(obj).forEach( (key, i) => {
if ( typeof obj[key] === 'object' ) {
constantize( obj[key] );
}
});
};
4.ES6 聲明變量的六種方法
ES5 只有兩種聲明變量的方法：var命令和function命令跷敬。ES6 除了添加let和const命令，另外兩種聲明變量的方法：import命令和class命令热押。所以西傀，ES6 一共有 6 種聲明變量的方法。PS：猝不及防的考點桶癣？拥褂？？
5.頂層對象的屬性
頂層對象牙寞，在瀏覽器環(huán)境指的是window對象饺鹃，在 Node 指的是global對象。ES5 之中间雀，頂層對象的屬性與全局變量是等價的悔详。
window.a = 1;
a // 1
a = 2;
window.a // 2
上面代碼中，頂層對象的屬性賦值與全局變量的賦值惹挟，是同一件事茄螃。
頂層對象的屬性與全局變量掛鉤，被認為是 JavaScript 語言最大的設(shè)計敗筆之一连锯。這樣的設(shè)計帶來了幾個很大的問題归苍，首先是沒法在編譯時就報出變量未聲明的錯誤，只有運行時才能知道（因為全局變量可能是頂層對象的屬性創(chuàng)造的运怖，而屬性的創(chuàng)造是動態(tài)的）拼弃；其次，程序員很容易不知不覺地就創(chuàng)建了全局變量（比如打字出錯）摇展；最后吻氧，頂層對象的屬性是到處可以讀寫的，這非常不利于模塊化編程。另一方面医男，window對象有實體含義砸狞，指的是瀏覽器的窗口對象捻勉，頂層對象是一個有實體含義的對象镀梭，也是不合適的。
ES6 為了改變這一點踱启，一方面規(guī)定报账，為了保持兼容性，var命令和function命令聲明的全局變量埠偿，依舊是頂層對象的屬性透罢；另一方面規(guī)定，let命令冠蒋、const命令羽圃、class命令聲明的全局變量，不屬于頂層對象的屬性抖剿。也就是說朽寞，從 ES6 開始，全局變量將逐步與頂層對象的屬性脫鉤斩郎。PS：又是一個猝不及防的考點Ｄ匀凇！缩宜！
var a = 1;
// 如果在 Node 的 REPL 環(huán)境肘迎，可以寫成 global.a
// 或者采用通用方法，寫成 this.a
window.a // 1
let b = 1;
window.b // undefined
上面代碼中锻煌，全局變量a由var命令聲明妓布，所以它是頂層對象的屬性；全局變量b由let命令聲明宋梧，所以它不是頂層對象的屬性匣沼，返回undefined。
6.globalThis 對象
JavaScript 語言存在一個頂層對象乃秀，它提供全局環(huán)境（即全局作用域）肛著，所有代碼都是在這個環(huán)境中運行。但是跺讯，頂層對象在各種實現(xiàn)里面是不統(tǒng)一的枢贿。
瀏覽器里面，頂層對象是window刀脏，但 Node 和 Web Worker 沒有window局荚。
瀏覽器和 Web Worker 里面，self也指向頂層對象，但是 Node 沒有self耀态。
Node 里面轮傍，頂層對象是global，但其他環(huán)境都不支持首装。
同一段代碼為了能夠在各種環(huán)境创夜，都能取到頂層對象，現(xiàn)在一般是使用this變量仙逻，但是有局限性驰吓。
全局環(huán)境中，this會返回頂層對象系奉。但是檬贰，Node 模塊和 ES6 模塊中，this返回的是當(dāng)前模塊缺亮。
函數(shù)里面的this翁涤，如果函數(shù)不是作為對象的方法運行，而是單純作為函數(shù)運行萌踱，this會指向頂層對象葵礼。但是，嚴格模式下虫蝶，這時this會返回undefined章咧。
不管是嚴格模式，還是普通模式能真，new Function('return this')()赁严，總是會返回全局對象。但是粉铐，如果瀏覽器用了 CSP（Content Security Policy疼约，內(nèi)容安全策略），那么eval蝙泼、new Function這些方法都可能無法使用程剥。
綜上所述，很難找到一種方法汤踏，可以在所有情況下织鲸，都取到頂層對象。下面是兩種勉強可以使用的方法溪胶。PS:突如其來的搂擦。。哗脖。
// 方法一
(typeof window !== 'undefined'
? window
: (typeof process === 'object' &&
typeof require === 'function' &&
typeof global === 'object')
? global
: this);
// 方法二
var getGlobal = function () {
if (typeof self !== 'undefined') { return self; }
if (typeof window !== 'undefined') { return window; }
if (typeof global !== 'undefined') { return global; }
throw new Error('unable to locate global object');
};
ES2020 在語言標(biāo)準(zhǔn)的層面瀑踢，引入globalThis作為頂層對象扳还。也就是說，任何環(huán)境下橱夭，globalThis都是存在的氨距，都可以從它拿到頂層對象，指向全局環(huán)境下的this棘劣。
墊片庫global-this模擬了這個提案俏让，可以在所有環(huán)境拿到globalThis。
