首先，JavaScript確實(shí)是一門編譯型語言，與C等典型編譯型語言相比，區(qū)別在于JavaScript的編譯過程（通常）是在實(shí)際執(zhí)行前進(jìn)行的，而且并不會(huì)產(chǎn)生可移植的編譯結(jié)果。
一、編譯過程
通常的編譯過程：
通常的編譯過程分為以下三步
1. 分詞與詞法分析：
把輸入的字符串分解為一些對編程語言有意義的代碼塊（詞法單元）。
2. 解析與語法分析：
將上一步的詞法單元集合分析并最終轉(zhuǎn)換為一個(gè)由元素逐級(jí)嵌套所組成的代表了程序語法結(jié)構(gòu)的樹，稱為抽象語法樹（Abstract Syntax Tree，AST）。
3. 代碼生成：
將上一步的AST轉(zhuǎn)換為可執(zhí)行代碼。
JavaScript的編譯過程：
JavaScript具體的編譯過程如下
1. 分詞／詞法分析：
這個(gè)過程會(huì)將字符串分割為有意義的代碼塊，這些代碼塊稱之為詞法單元。例如變量的聲明：
var a = 2;
這行代碼會(huì)被分為以下詞法單元：var、a、=、2(空格算不算詞法單元取決于空格對于該編程語言是否具有意義)；這些零散的詞法單元會(huì)組成一個(gè)詞法單元流（數(shù)組）進(jìn)行解析。
2. 解析／與法分析：
這個(gè)過程會(huì)將詞法單元流轉(zhuǎn)換成一棵抽象語法樹(Abstract Syntax Tree，AST）在線解析工具。
"var a = 2;"的詞法單元流就會(huì)被解析為下面的AST：
3. 代碼生成：
將AST轉(zhuǎn)化為可執(zhí)行的代碼。
二、JavaScript編譯特點(diǎn)：
JavaScript引擎中的編譯器做的事情與上述類似，但是由于編譯就在代碼執(zhí)行前，所以JavaScript編譯執(zhí)行效率就比一般靜態(tài)語言敏感得多，故而也非常復(fù)雜。
JavaScript引擎在這部分做了許多優(yōu)化：
- 一是對語法分析和代碼生成階段進(jìn)行優(yōu)化（例如針對冗余元素進(jìn)行優(yōu)化），目的是提高編譯后的執(zhí)行效率。
- 二是對編譯過程進(jìn)行優(yōu)化（如JIT，延遲編譯或者重編譯），目的是縮短編譯過程，保證性能最佳。
JavaScript 中的編譯器、引擎和作用域
- 編譯器：負(fù)責(zé)語法分析和代碼生成。
- 引擎:負(fù)責(zé)整個(gè)過程中JavaScript的編譯及執(zhí)行過程。瀏覽器不同，其引擎也不同，比如Chrome采用的是v8，Safari采用的是SquirrelFish Extreme。
- 作用域：負(fù)責(zé)收集并維護(hù)所有的標(biāo)識(shí)符（變量）簡析JavaScript中的作用域與作用域鏈。
JavaScript編譯過程具體分析
1. 一個(gè)具體的例子：
var a = 2;
首先進(jìn)行詞法分析，然后將詞法單元流交給編譯器生成AST，再有編譯器生成可執(zhí)行的代碼。
編譯器遇到
var a;，編譯器詢問：同一作用域集存在同名變量 ? 忽略該聲明，繼續(xù)編譯 : 要求作用域在當(dāng)前作用域的集合生命一個(gè)名為a的新變量。編譯器會(huì)為引擎的運(yùn)行生成一系列代碼，這些代碼用于為變量
a進(jìn)行賦值操作。引擎會(huì)詢問：當(dāng)前作用域存在這個(gè)變量 ? 進(jìn)行賦值操作 : 查找這個(gè)變量（從當(dāng)前作用域向上查找，直到全局作用域，如果還是沒有，就會(huì)拋出一個(gè)異常)。-
LHS和RHS,當(dāng)引擎執(zhí)行編譯器給的代碼（賦值操作）時(shí),會(huì)通過查找這個(gè)變量來判斷這個(gè)變量是否已經(jīng)聲明，這個(gè)過程需要作用域的協(xié)助，而查找的方式分為兩種：LHS(“賦值操作的目標(biāo)是誰”)和RHS(”誰是賦值操作的源頭“）。
LHS：賦值操作的左側(cè)，試圖查找到變量的容器本身，從而可以對其賦值，即找到復(fù)制操作的目標(biāo)。
-
RHS：另外一種查找，可以簡單理解為復(fù)制操作的右側(cè)，其查找目標(biāo)為取到目標(biāo)的源值，即找到這個(gè)變量具體的值而非容器。
LHS與RHS舉例：var a; //RHS引用 a = 2; //LHS引用 alert(a); //RHS引用 /** 這段代碼塊既有RHS引用也有LHS引用， * 2被當(dāng)作函數(shù)參數(shù)傳遞給foo()時(shí)， * 2會(huì)被分配給變量a(a = 2); */ function foo(a){ alert(a); } foo(2);
區(qū)分RHS和LHS也很重要，尤其分析異常時(shí)。例如下面：
function foo(a){ alert(a + b); b = a; } foo(2);第一次對
b進(jìn)行RHS查詢會(huì)查詢不到這個(gè)變量，因?yàn)樗且粋€(gè)未聲明的變量，在所有作用域都無法找到var b;;此時(shí)引擎會(huì)拋出一個(gè)異常（ReferenceError)。在非嚴(yán)格模式下，當(dāng)引擎進(jìn)行LHS查詢查詢不到某個(gè)變量時(shí)，全局作用域會(huì)創(chuàng)建一個(gè)同名的變量交給引擎，當(dāng)然這個(gè)變量具有全局作用域;而在嚴(yán)格模式下，引擎會(huì)拋出ReferenceError異常?？偨Y(jié)一下就是：-
RHS未找到：引擎會(huì)拋出錯(cuò)誤
RefrenceError。 - LHS未找到：引擎（或引擎中的編譯器）會(huì)幫你在頂層作用域聲明一個(gè)具有該名稱的變量。（嚴(yán)格模式除外）。
舉個(gè)例子：
var a;//LHS 尋找a,未找到，通知作用域聲明一個(gè)新變量，命名為a a=2;//LHS 找到a并給其賦值2 console.log(a);//RHS找到a的值2，并將其輸出
2. 關(guān)于詞法作用域：
JavaScript其根據(jù)一套規(guī)則來管理變量的查找與引用，詞法作用域就是其使用的規(guī)則，在編譯器進(jìn)行詞法化時(shí)，會(huì)根據(jù)你寫代碼時(shí)將變量和塊作用域?qū)懺谀睦?，來決定規(guī)則的內(nèi)容。這其中又包含了塊作用域這個(gè)概念，不展開講，只要記住ES6之前沒有塊作用域，只有函數(shù)有作用域，即：函數(shù)內(nèi)部是一個(gè)獨(dú)立的塊作用域。(有個(gè)特例：catch語句塊內(nèi)也是獨(dú)立的作用域。)
3. 關(guān)于變量提升：
明白了編譯器和引擎執(zhí)行之間的分工，其實(shí)你應(yīng)該就不會(huì)覺得變量提升是如此之詭異了，因?yàn)橐婺玫酱a的時(shí)候，編譯器已經(jīng)做了一些轉(zhuǎn)換，編譯器干嘛要干這個(gè)事情？因?yàn)樗诘谝徊骄驼业剿械穆暶?，并且用合適的作用域?qū)⑺麄冴P(guān)聯(lián)起來，這也正是詞法作用域的核心。表現(xiàn)為： 包括變量和函數(shù)在內(nèi)的所有聲明都會(huì)在當(dāng)前塊作用域內(nèi)被首先處理，即類似于提升到最前面聲明，但是復(fù)制處理操作因?yàn)槭窃趫?zhí)行階段，因此編譯階段他們原地待命等待執(zhí)行。
-
變量和函數(shù)在內(nèi)的聲明都在任何代碼執(zhí)行前被處理。聲明操作在編譯階段時(shí)進(jìn)行的，而賦值操作是在等到執(zhí)行階段才執(zhí)行。
//代碼塊1 var a = 2; alert(a); // 輸出2 //代碼塊2 b = 2; var b; alert(b); //輸出2 //代碼塊3 alert(c); //輸出undefined var c = 2; //代碼塊4 var d; alert(d); //輸出undefined d = 2;代碼塊2，4等價(jià)于代碼塊1，3（除了變量名不同，內(nèi)存地址不同）；這個(gè)過程就好像變量和函數(shù)聲明的代碼被移動(dòng)到了最上面，這個(gè)過程就叫提升。
-
函數(shù)聲明可以提升，函數(shù)表達(dá)式不能提升。
//函數(shù)聲明可以提升 foo(); // 輸出2； function foo(){ alert(2); } //函數(shù)表達(dá)式不可提升 bar(); // TypeError var bar = function f1(){ alert(2); } -
函數(shù)聲明優(yōu)先于變量聲明提升,出現(xiàn)在后面的函數(shù)聲明可以覆蓋之前的聲明。
foo(); // 輸出3 function foo(){ alert(1); } var foo = function bar(){ alert(2); } function foo(){ alert(3); }
三、三兄弟合作
第一版
下面我們以一個(gè)最簡單的例子var a = 2;來進(jìn)行分析：
- 編譯器出馬，先進(jìn)行詞法分析，將該賦值操作拆分：
var a;/a=2;。第一步var a，編譯器可以處理，他會(huì)先詢問變量管家——作用域：存在一個(gè)該名稱的變量 ? 繼續(xù)編譯 : 通知作用域聲明一個(gè)新變量，命名為a。 - 編譯器繼續(xù)為引擎進(jìn)行代碼生成，這些代碼主要用來處理
a=2這個(gè)賦值操作。 - 引擎拿到可執(zhí)行代碼，然后詢問作用域：當(dāng)前有一個(gè)叫a的變量嗎 ? 使用這個(gè)變量，賦值給他 : 繼續(xù)往上級(jí)作用域查找。如果到根作用域仍然找不到，引擎直接報(bào)錯(cuò)拋異常。
第二版
有了上面的基礎(chǔ)知識(shí)，我們把三兄弟的合作再細(xì)化一下，例子也升級(jí)一下，用上面賦值并輸出的例子。
- 編譯器：作用域，我需要對a進(jìn)行LHS查找，你見過么？
- 作用域：我這找到根都沒看到啊，要不咱聲明一個(gè)吧！
- 編譯器：好，建好了，那我生成代碼了，引擎，給你你要的代碼。
- 引擎：收到，咦，需要一個(gè)a啊，作用域，幫我LHS找一下有沒有？
- 作用域： 找到了，編譯器已經(jīng)幫忙聲明了。
- 引擎：好的，那我對它賦值。
- 引擎：作用域，不要意思，我碰到一個(gè)console，需要RHS引用。
- 作用域： 找到了，是個(gè)內(nèi)置對象，拿走不謝。
- 引擎： 好的作用域，對了能在幫我確認(rèn)一下a的RHS么？
- 作用域：確認(rèn)好了，沒變，拿去用吧，他的值是2
- 引擎：好咧，我把2傳遞給log(..)
四、關(guān)于JavaScript引擎
講講虛擬機(jī)與引擎
1. 虛擬機(jī)是什么？
JavaScript通常被稱為虛擬機(jī)。虛擬機(jī)是指在既定的計(jì)算機(jī)系統(tǒng)中運(yùn)用軟件模擬的具有完整硬件系統(tǒng)功能的計(jì)算機(jī)系統(tǒng)。根據(jù)虛擬機(jī)的模擬以及代替現(xiàn)實(shí)計(jì)算機(jī)的精確度，它們被分為了很多種類型。其中流程虛擬機(jī)的功能性較低，只能運(yùn)行一道程序或流程。比如，Wine就是一種可以讓你在Linux計(jì)算機(jī)上運(yùn)行Windows運(yùn)用程序的流程虛擬機(jī)，但它并不能提供一套完整的Windows操作系統(tǒng)。
JavaScript引擎是一種為解釋和執(zhí)行JavaScript代碼而專門設(shè)計(jì)的流程虛擬機(jī)。
注解：將通過布局網(wǎng)頁使瀏覽器運(yùn)行的布局引擎和解釋，執(zhí)行代碼的較低水平的JavaScript引擎作對比是相當(dāng)重要的。以下是一些比較到位的闡述。
2. JavaScript引擎完成了什么事？
JavaScript的基本工作就是將開發(fā)者寫的JavaScript代碼轉(zhuǎn)換成能被瀏覽器理解甚至能在應(yīng)用程序上運(yùn)用的最優(yōu)化的快捷代碼。事實(shí)上，JavaScriptCore稱自己是優(yōu)化的虛擬機(jī)。
更確切地說，每一個(gè) JavaScript 引擎都實(shí)現(xiàn)了ECMAScript的一種版本，而JavaScript 是它的一種方言叫法。JavaScript引擎會(huì)隨著ECMAScript的發(fā)展而進(jìn)步，因?yàn)槿绱硕嗖煌囊娑家c不同的瀏覽器一起運(yùn)作，如headless browser（如PhantomJS）, 或者像Node.js這樣的執(zhí)行環(huán)境。
通過以上對虛擬機(jī)的定義，將JavaScript引擎稱為流程虛擬機(jī)也就是理所當(dāng)然的了。因?yàn)樗ㄒ坏哪康木褪且x取和編譯JavaScript代碼。然而這并不意味著它只是一種簡單的引擎。舉個(gè)例子，JavaScriptCore有6個(gè)分區(qū)來分析、翻譯、優(yōu)化以及垃圾收集JavaScript代碼。
3. JavaScript引擎是如何運(yùn)作的？
這取決于引擎。WebKit的JavaScriptCore以及谷歌的V8引擎之所以能引起我們的興趣是因?yàn)镹ativeScript對它們起了杠杠作用。這兩種引擎不同程度地掌握著過程碼。
JavaScriptCore是通過一系列的步驟去編譯和優(yōu)化腳本。
它會(huì)對詞匯進(jìn)行分析，將其分解成一系列的記號(hào)，或附上某些既定的意義。這些記號(hào)之后會(huì)被分析程序理出句法，并嵌入句法樹。之后4個(gè)JIT（及時(shí)）程序開始運(yùn)行、分析和執(zhí)行那些分析程序產(chǎn)生的字節(jié)碼。
簡單講，JavaScript引擎將你的源代碼分解成串（又叫做分詞），再將那些串轉(zhuǎn)換成為編譯器能夠理解的字節(jié)碼，然后將其執(zhí)行。
用C++編寫的谷歌的V8引擎也能編譯和解釋JavaScript源代碼，掌握內(nèi)存記憶配置且可垃圾回收殘留物。
它由2個(gè)能夠?qū)⒃创a直接轉(zhuǎn)換成計(jì)算機(jī)代碼的編譯器組成。
- Full-codegen：輸出非優(yōu)化代碼的快速編譯器。
- Crankshaft：輸出快速，優(yōu)化代碼的慢速編譯器。
如果Crankshaft認(rèn)為由Full-codegen產(chǎn)生的不夠優(yōu)化的代碼需要優(yōu)化，它將會(huì)取而代之，這就是“crankshafting”流程。
有趣的事實(shí)：”機(jī)軸“是運(yùn)用在自動(dòng)化產(chǎn)業(yè)中內(nèi)部氧化引擎里的一個(gè)完整的部分。這種眾所周知的引擎在更高級(jí)的載體也就是V8中有所運(yùn)用。
若計(jì)算機(jī)代碼是由編譯過程產(chǎn)生的，那么這個(gè)引擎就會(huì)在瀏覽器中顯示出所有的ECMA標(biāo)準(zhǔn)規(guī)定的數(shù)據(jù)類型、操作員、客體和功能，或者任何需要用到它們的運(yùn)行環(huán)境，如NativeScript.
4. JavaScript引擎有哪些？
在編譯器中，差不多有37%是由市場因素組成的，品牌重塑是你在編輯器上可以做的不多的事情之一，因此引擎被賦予了迎合市場的名字：SquirrelFish, Nitro, SFX…
在市場因素對為引擎進(jìn)行命名以及重命名有著重要影響的情況下，對JavaScript引擎發(fā)展史上的重大事件做記錄是很有必要的。
| Browser, Headless Browser, or Runtime | JavaScript Engine |
|---|---|
| Mozilla | Spidermonkey |
| Chrome | V8 |
| Safari ** | JavaScriptCore * |
| IE and Edge | Chakra |
| PhantomJS | JavaScriptCore |
| HTMLUnit | Rhino |
| TrifleJS | V8 |
| Node.js *** | V8 |
| io.js *** | V8 |
* JavaScriptCore被重寫為SquirrelFish，也被重塑成SquirrelFishExtreme品牌，又叫做Nitro。然而，在WebKit安裝啟用下的JavaScript的確也被稱為JavaScript引擎（如Safari）。
** iOS開發(fā)者應(yīng)該認(rèn)識(shí)到Mobile Safari包含Nitro，但UIWebView并不包括JIT編譯器，所以這個(gè)過程會(huì)比較慢。然而，有了iOS8系統(tǒng)，開發(fā)者可以運(yùn)用包含Nitro的WKWebView來大幅度加速這個(gè)運(yùn)行速度。Hybrid App的開發(fā)者應(yīng)該會(huì)覺得比較輕松。
*** 之所以有做出將io.js從Node.js中分離出來的一個(gè)因素是和可以支持這個(gè)項(xiàng)目的V8版本有關(guān)。這將會(huì)是一個(gè)挑戰(zhàn)，就像這邊所列出來的一樣。
五、關(guān)于作用域
作用域范圍
傳統(tǒng)的類C的語言作用域是塊級(jí)作用域block-level scope，一個(gè)花括號(hào)就是一個(gè)作用域，而對于JavaScript來講，作用域是函數(shù)級(jí)的function-level scop。JavaScript語言的作用域僅存在于函數(shù)范圍中。
-
全局作用域
在JavaScript代碼中的任何地方都有定義的變量被稱為全局變量，其也擁有全局作用域。一般來說，不在任何函數(shù)體內(nèi)定義的變量以及未定義就直接賦值的變量擁有全局作用域。事實(shí)上，JavaScript默認(rèn)擁有一個(gè)全局對象
window，聲明一個(gè)全局變量，就是為window對象的同名屬性賦值。如下面代碼所示。function fun1(){ } var a = 1; console.log(window.a);//1 console.log(window.fun1); // function fun1(){} -
函數(shù)級(jí)作用域
在JavaScript中，任何定義在函數(shù)體內(nèi)的變量或者函數(shù)都將處于函數(shù)作用域中，這些變量也無法被在函數(shù)外部使用。函數(shù)內(nèi)部聲明的所有變量在函數(shù)體內(nèi)始終是可見的，在JavaScript函數(shù)定義中，JavaScript在預(yù)編譯階段中會(huì)先掃描整個(gè)函數(shù)體的語句，將所有聲明的變量“提升”到函數(shù)頂部。
function test(o) { var i = 0; // i在整個(gè)函數(shù)體內(nèi)均是有定義的 console.log(j); //j在里面有定義，但是沒有賦值 console.log(k); //k在里面有定義，但是沒有賦值。 if (typeof o == "object") { var j = 0; for (var k = 0; k < 10; k++) { console.log(k); } console.log(k); // 輸出10; }; console.log(j); //若o為對象類型，則為0；否則為undefined };當(dāng)函數(shù)體內(nèi)局部變量和函數(shù)體外的變量重名的話，內(nèi)部局部變量將會(huì)遮蓋同名的全局變量。
var scope = "global"; function f() { console.log(scope); //undefined var scope = "local"; console.log(scope); //local; } //如前面所說的，“變量提升”，所有的變量將會(huì)預(yù)先編譯，且賦值為undefined。JavaScript函數(shù)內(nèi)的嵌套函數(shù)可以訪問外層函數(shù)的變量，但是外層函數(shù)訪問不了嵌套函數(shù)的變量。
var a = 1; function fun4() { var b = 1; console.log(a); console.log(c); //報(bào)錯(cuò) function fun5() { console.log(a); //1 console.log(b); //1 var c = 3; } } fun4();事實(shí)上，無論是函數(shù)作用域中的覆蓋問題還是變量的訪問權(quán)限，起作用的是作用域鏈。
作用域鏈
在JavaScript的全局變量和函數(shù)中都有一個(gè)與之關(guān)聯(lián)的作用域鏈，這個(gè)作用域鏈?zhǔn)且粋€(gè)對象列表或是鏈表，其中定義了變量或函數(shù)的作用域中的變量，并且作用域鏈的作用就是用來解析標(biāo)識(shí)符。在ECMA-262標(biāo)準(zhǔn)第三版中，[[scope]]這個(gè)內(nèi)部屬性包含了該鏈表，其決定了變量的訪問權(quán)限。先創(chuàng)建一個(gè)全局函數(shù)：
function add(a,b){
var sum = a + b;
return sum;
}
全局函數(shù)sum()創(chuàng)建的時(shí)候，實(shí)際上其只保存一個(gè)作用域鏈，其作用域鏈會(huì)插入一個(gè)Global object（全局對象），該全局對象擁有所有的全局變量和函數(shù)，包括window,document,sum()等等：
執(zhí)行的時(shí)候，每個(gè)執(zhí)行上下文都有自己的作用域鏈，當(dāng)執(zhí)行上下文被創(chuàng)建的時(shí)候，作用域鏈會(huì)被初始化為當(dāng)前運(yùn)行函數(shù)的[[scope]]屬性中的對象。這些值會(huì)按照出現(xiàn)在函數(shù)的順序被復(fù)制到執(zhí)行上下文的作用域鏈上，該過程一旦完成，一個(gè)被稱之為活動(dòng)對象的新對象就為執(zhí)行上下文創(chuàng)建好了?；顒?dòng)對象作用函數(shù)運(yùn)行時(shí)的變量對象，包含了所有的局部變量，命名函數(shù)，參數(shù)集合以及this。然后該對象被推入作用域鏈的最前端。
所以當(dāng)sum函數(shù)執(zhí)行的時(shí)候，即var total = sum(5,10)的時(shí)候，其全新的作用域鏈將如下圖所示：
對于嵌套函數(shù)而言，其作用域鏈上至少有三個(gè)對象，一個(gè)為嵌套函數(shù)的調(diào)用對象，一個(gè)為外部函數(shù)的調(diào)用對象，還有一個(gè)為全局對象。同時(shí)由于每次執(zhí)行函數(shù)時(shí)，其執(zhí)行上下文都是獨(dú)一無二的，所以在每次調(diào)用外部函數(shù)的時(shí)候，嵌套函數(shù)的作用域鏈也是不同的。
同時(shí)在函數(shù)執(zhí)行的時(shí)候，每次遇到變量，其都會(huì)進(jìn)行標(biāo)識(shí)符的解析以此來決定從哪里獲取或存儲(chǔ)數(shù)據(jù)。在這個(gè)過程中，其會(huì)首先搜索執(zhí)行上下文的作用域鏈，從作用域鏈的頭部開始，再到作用域鏈的底部結(jié)束。如果在這個(gè)過程中找到了變量，則使用該變量；如果沒有找到，則會(huì)拋出異常；如果有同名的變量存在作用域鏈不同的位置，那以先獲取到的變量為準(zhǔn)。
作用域提升
-
變量提升
對JavaScript解釋器而言，所有的函數(shù)和變量聲明都會(huì)被提升到最前面, 并且變量聲明永遠(yuǎn)在前面，賦值在聲明過程之后。比如:
var x = 10; function x(){}; console.log(x); // 10實(shí)際上被解釋為:
var x; function x(){}; x = 10; console.log(x); // 10、 -
函數(shù)提升
函數(shù)的聲明方式主要由兩種：聲明式和變量式。聲明式會(huì)自動(dòng)將聲明放在前面，并且執(zhí)行賦值過程。而變量式則是先將聲明提升，然后到賦值處再執(zhí)行賦值。比如:
function test() { foo(); // TypeError "foo is not a function" bar(); // "this will run!" var foo = function () { // function expression assigned to local variable 'foo' alert("this won't run!"); } function bar() { // function declaration, given the name 'bar' alert("this will run!"); } } test();實(shí)際上等價(jià)于:
function test() { var foo; var bar; bar = function () { // function declaration, given the name 'bar' alert("this will run!"); } foo(); // TypeError "foo is not a function" bar(); // "this will run!" foo = function () { // function expression assigned to local variable 'foo' alert("this won't run!"); } } test();主要注意的地方：帶有命名的函數(shù)變量式聲明，是不會(huì)提升到作用域范圍內(nèi)的，比如:
var baz = function spam() {}; baz(); // vaild spam(); // ReferenceError "spam is not defined"
