你不知道的JavaScript（ES6與之未來）

Julylovin 發(fā)布于2019-08-20 16:41 / 1290人閱讀

摘要：然而，臨近規(guī)范發(fā)布時，有建議提及未來的版本號切換為編年制，比如用同來指代在年末前被定稿的所有版本。總得來說就是版本號不再那么重要了，開始變得更像一個萬古長青的活標(biāo)準(zhǔn)。

你不知道的JS（下卷）ES6與之未來 第一章：ES的今與明

在你想深入這本書之前，你應(yīng)該對（在讀此書時）JavaScript的最近標(biāo)準(zhǔn)掌握熟練，也就是ES5（專業(yè)來說是ES 5.1）。在此，我們決定全方面地談?wù)撽P(guān)于將近的 ES6，同時預(yù)見JS將會怎樣發(fā)展。

如果你對JavaScript不夠自信，我極力推薦你先讀一讀本系列的其他話題：

入門與進(jìn)階：你是編程和JS的菜鳥嗎？這部分是在你開始學(xué)習(xí)征途是需要的線路圖。

作用域與閉包：你知道JS的詞法作用域是基于編譯器（不是解釋器）語義的嗎？你能解釋閉包是如何成為詞法作用域和函數(shù)作為值的直接結(jié)果的嗎？

this與對象原型：你能列舉this綁定的四個簡單原則嗎？你可曾在JS中用偽造“類”，而不是采取更簡單的“行為委托”設(shè)計模式？你聽過 鏈接到其他對象的對象（結(jié)鏈對象） （OOLO）嗎？

類型與語法：你了解過JS中的內(nèi)置類型嗎？更關(guān)鍵是，你知道如何在類型之間正確且不出錯地使用強(qiáng)制轉(zhuǎn)換嗎？你還對JS語法/句法的毫厘之差感到心安嗎？

異步與性能：你還在使用回調(diào)函數(shù)處理你的異步性？你能說明promise是什么并且為何/如何解決了“回調(diào)地獄”的嗎？你知道如何使用generator來提升異步代碼的易讀性嗎？到底是什么構(gòu)成了成熟優(yōu)異的JS程序和獨立操作？

如果你已經(jīng)讀過了這些話題并且對它們涵蓋的內(nèi)容了然于胸，那此刻就讓我們深入JS的進(jìn)化過程來探索已初露端倪和更遠(yuǎn)的變化。

與ES5不同，ES6不僅僅往JavaScript這門語言添加一套新API。它包含了大量的新的語法形式，其中的一些你可能會花上點時間才能適應(yīng)。還有幾種新的組織形式以及為各種數(shù)據(jù)類型添加的新API helper方法。

對這門語言來說ES6十分激進(jìn)。就算你自以為懂得ES5，ES6也滿是 你還未知曉 新東西，那就準(zhǔn)備好！這本書囊括了ES6中你需要立即掌握的重要主題，更有甚者是能預(yù)見你應(yīng)該能意識到未來方向。

警告： 本書中的所有代碼都模擬在ES6及以上的環(huán)境中運行。這次編寫，不同的瀏覽器和JS環(huán)境（比如Node.js）對ES6的支持可能不同，由此你經(jīng)歷可能會豐富多樣。

版本

JavaScript標(biāo)準(zhǔn)官方名為“ECMAScript”（縮寫為“ES”），并且直到最近才完全采用序列數(shù)來表示版本（例如，“5”代表“第五版”）。

最早的版本，ES1和ES2，并不廣為人知曉和使用。ES3是JavaScript第一次廣泛傳播的開端，并且構(gòu)成了像IE6-8和早前的Android 2.x移動瀏覽器的JavaScript標(biāo)準(zhǔn)。由于一些超出我們討論范圍的政治原因，不幸的的ES4沒有出現(xiàn)。

在2009年，ES5正式定稿（之后是2011年的ES5.1），它在瀏覽器的現(xiàn)代革命和爆發(fā)性增長（比如Firefox，Chrome，Opera，Safari，和其他許多瀏覽器）中廣泛傳播，并作為JS標(biāo)準(zhǔn)確定下來。

展望下一個版本的JS（從2013年過渡到2014年和之后的2015年），在討論中顯而易見的是ES6。

然而，臨近ES6規(guī)范發(fā)布時，有建議提及未來的版本號切換為編年制，比如用ES2016（同ES7）來指代在2016年末前被定稿的所有版本。有些人對此否定，相對于后來的ES2015來說，ES6更可能繼續(xù)保持優(yōu)勢。然而，事實上ES2016可能預(yù)兆了新的編年制（將被使用）。

還可以觀察出JS進(jìn)化的頻率即使與一年一度為定版相比都要快得多。只要一個想法開始標(biāo)準(zhǔn)化討論的進(jìn)程，瀏覽器就開始為這種特性構(gòu)建原型，而且早期的采用者就開始在代碼中進(jìn)行實驗。

通常在一個特性被官方承認(rèn)之前，這些早期的引擎/工具的原型已經(jīng)被標(biāo)準(zhǔn)化了。由此也可以認(rèn)為未來的JS版本將是一個特性一個特性的更新，而非一組主要特性的隨意集合的更新（就像現(xiàn)在這樣），也不是每年更新（像可能將變成的那樣）。

總得來說就是版本號不再那么重要了，JavaScript開始變得更像一個萬古長青的活標(biāo)準(zhǔn)。對待它的最佳方法是不再“基于ES6”來思考你的代碼，而是按它支持的特性考慮。

轉(zhuǎn)譯

特性的快速演變，給開發(fā)者們促使一個本來存在的問題惡化，他們熱衷于立即使用新特性，而同時被被現(xiàn)實打臉，他們的網(wǎng)站/app需要支持那些不支持這些特性的老版本瀏覽器。

在整個行業(yè)中ES5的方式似乎已經(jīng)無力回天了，它典型的思維模式是，代碼庫會等至幾乎所有的前ES5環(huán)境不能支持它們之后才開始采用ES5。其結(jié)果，就是許多人最近（在本書寫作時）才開始采用strict模式這樣的東西，而它早在五年前就在ES5中定稿了。

業(yè)界普遍認(rèn)為，等待和落后于語言規(guī)范那么多年，對JS生態(tài)系統(tǒng)是有害的。所有負(fù)責(zé)推動語言進(jìn)化的人都期待這樣的事情；只要新的特性和模式以規(guī)范的形式穩(wěn)定下來，并且瀏覽器有機(jī)會實現(xiàn)它們，開發(fā)者就開始基于這些新的特性和模式進(jìn)行編碼。

那么我們?nèi)绾谓鉀Q這個看似矛盾的問題呢？答案是工具化，特別是一種稱為 轉(zhuǎn)譯（transpiling） 的技術(shù)（轉(zhuǎn)換+編譯）。大致上，它的理念是使用一種特殊的工具將你的ES6代碼轉(zhuǎn)換為可以在ES5環(huán)境中運行的等價物（甚至更近似的！）。

舉個栗子TvT，想一想簡寫屬性定義（見第二章的“對象字面量擴(kuò)展”）。以下是ES6的形式：

var foo = [1,2,3];

var obj = {
    foo        // 意指 `foo: foo`
};

obj.foo;       // [1,2,3]

這（大致）是它如何轉(zhuǎn)譯的：

var foo = [1,2,3];

var obj = {
    foo: foo
};

obj.foo;    // [1,2,3]

這是一個小而愉悅的轉(zhuǎn)換，（因為）它讓我們在一個對象字面量聲明中將foo: foo簡寫為foo，如果名稱（屬性名和屬性值）相同的話。

轉(zhuǎn)譯器為你執(zhí)行這些轉(zhuǎn)換，這個過程通常是構(gòu)建工作流的一個步驟，這和你使用linting（檢查代碼），壓縮等其他類似操作如出一轍。

Shim庫/Polyfill庫

不是所有的ES6新特性都需要轉(zhuǎn)譯器。可行的話，Polyfill（也叫shims）是一種模板，它為從一個新點的環(huán)境到舊點的環(huán)境中定義等效行為。語法不能被填補(bǔ)，但是API往往可以。

比方說，Object.is(..)是一個用來檢查兩個值嚴(yán)格等價性的新功能，它不包括===對于NaN和-0值的那種微小差異的例外。為Object.is(..)使用Polyfill相當(dāng)簡單：

if (!Object.is) {
    Object.is = function(v1, v2) {
        // 檢查 `-0`
        if (v1 === 0 && v2 === 0) {
            return 1 / v1 === 1 / v2;
        }
        // 檢查 `NaN`
        if (v1 !== v1) {
            return v2 !== v2;
        }
        // 其他的所有情況
        return v1 === v2;
    };
}

提示：注意外層的if語句包圍了填補(bǔ)（polyfill）的內(nèi)容。這是一個重要的細(xì)節(jié)，它意味著這段代碼段僅僅為了在考慮中的API還未被定義的老環(huán)境而定義的應(yīng)變行為；你想要重寫API的情況少之又少。

這有一個被稱為“ES6 Shim”（https://github.com/paulmillr/...）的很棒的ES6填補(bǔ)（ES6 shim庫）合集，你絕對會在所有新JS項目中把它作為標(biāo)準(zhǔn)組成部分來采用！

看起來JS將會維持持續(xù)發(fā)展（狀態(tài)），同時瀏覽器也會持續(xù)地推出來支持新特性，而不是洪水般地更新。所以現(xiàn)代化的最佳策略就是在你的代碼庫中引入填補(bǔ)（polyfill庫），并在你的構(gòu)建流程中引入轉(zhuǎn)譯步驟，現(xiàn)在就開始習(xí)慣新的現(xiàn)實。

如果你決定保持現(xiàn)狀，等到所有不支持新特性的瀏覽器都消失才開始使用新特性，那么你將一直落后于時代。你將遺憾地錯過為使編寫JavaScript更有效，更高效，而且更健壯而設(shè)計的改革。

溫故

ES6（有人可能會稱之為ES2015）在本書寫作時剛剛落地，它包含許多你需要學(xué)習(xí)的新東西！

但更重要的是，它將使你的思維模式與JavaScript新的進(jìn)化方式一致。不再像以前許多人做的那樣為了某些官方文檔投票通過而苦等許多年。

現(xiàn)在，JavaScript新特性一旦準(zhǔn)備好就會登陸瀏覽器，由你來決定是否現(xiàn)在就搭上早班車，還是年年去玩兒代價不菲的追車游戲。

無論未來的JavaScript采用什么樣的標(biāo)記，它都將會以比以前更快的速度前進(jìn)。為使你保持在這門語言前進(jìn)方向上的最前列，轉(zhuǎn)譯和填補(bǔ)是關(guān)鍵的工具。

如果任何關(guān)于理解JavaScript新現(xiàn)狀有重要的敘述，那便讓所有的JS開發(fā)者都熱誠于從尾部移動到領(lǐng)頭的部分。而學(xué)習(xí)ES6就是這一切的起源！