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