說到JavaScript的運行原理，自然繞不開JS引擎，運行上下文，單線程，事件循環，事件驅動，回調函數等概念。本文主要參考文章[1,2]。
爲了更好的理解JavaScript如何工作的，首先要理解以下幾個概念。
JS Engine（JS引擎）
Runtime（運行上下文）
Call Stack (調用棧)
Event Loop（事件循環）
Callback (回調)
1.JS Engine
簡單來說，JS引擎主要是對JS代碼進行詞法、語法等分析，通過編譯器將代碼編譯成可執行的機器碼讓計算機去執行。
目前最流行的JS引擎非V8莫屬了，Chrome瀏覽器和Node.js採用的引擎就是V8引擎。引擎的結構可以簡單由下圖表示：
就如JVM虛擬機一樣，JS引擎中也有堆(Memory Heap)和棧(Call Stack)的概念。
棧。用來存儲方法調用的地方，以及基礎數據類型(如var a = 1)也是存儲在棧裏面的，會隨着方法調用結束而自動銷燬掉(入棧-->方法調用後-->出棧)。
堆。JS引擎中給對象分配的內存空間是放在堆中的。如var foo = {name: 'foo'} 那麼這個foo所指向的對象是存儲在堆中的。
此外，JS中存在閉包的概念，對於基本類型變量如果存在與閉包當中，那麼也將存儲在堆中。詳細可見此處1,3
關於閉包的情況，就涉及到Captured Variables。我們知道Local Variables是最簡單的情形，是直接存儲在棧中的。而Captured Variables是對於存在閉包情況和with,try catch情況的變量。
function foo () { var x; // local variables
var y; // captured variable, bar中引用了y
function bar () { // bar 中的context會capture變量y
use(y);
} return bar;
}
複製代碼如上述情況，變量y存在與bar()的閉包中，因此y是captured variable，是存儲在堆中的。
2.RunTime
JS在瀏覽器中可以調用瀏覽器提供的API，如window對象，DOM相關API等。這些接口並不是由V8引擎提供的，是存在與瀏覽器當中的。因此簡單來說，對於這些相關的外部接口，可以在運行時供JS調用，以及JS的事件循環(Event Loop)和事件隊列(Callback Queue)，把這些稱爲RunTime。有些地方也把JS所用到的core lib核心庫也看作RunTime的一部分。
同樣，在Node.js中，可以把Node的各種庫提供的API稱爲RunTime。所以可以這麼理解，Chrome和Node.js都採用相同的V8引擎，但擁有不同的運行環境(RunTime Environments)[4]。
3.Call Stack
JS被設計爲單線程運行的，這是因爲JS主要用來實現很多交互相關的操作，如DOM相關操作，如果是多線程會造成複雜的同步問題。因此JS自誕生以來就是單線程的，而且主線程都是用來進行界面相關的渲染操作 (爲什麼說是主線程，因爲HTML5 提供了Web Worker，獨立的一個後臺JS，用來處理一些耗時數據操作。因爲不會修改相關DOM及頁面元素，因此不影響頁面性能)，如果有阻塞產生會導致瀏覽器卡死。
如果一個遞歸調用沒有終止條件，是一個死循環的話，會導致調用棧內存不夠而溢出，如：
function foo() {
foo();
}foo();複製代碼例子中foo函數循環調用其本身，且沒有終止條件，瀏覽器控制檯輸出調用棧達到最大調用次數。
JS線程如果遇到比較耗時操作，如讀取文件，AJAX請求操作怎麼辦？這裏JS用到了Callback回調函數來處理。
對於Call Stack中的每個方法調用，都會形成它自己的一個執行上下文Execution Context，關於執行上下文的詳細闡述請看這篇文章
4.Event Loop & Callback
JS通過回調的方式，異步處理耗時的任務。一個簡單的例子：
var result = ajax('...');
console.log(result);
複製代碼此時並不會得到result的值，result是undefined。這是因爲ajax的調用是異步的，當前線程並不會等到ajax請求到結果後才執行console.log語句。而是調用ajax後請求的操作交給回調函數，自己是立刻返回。正確的寫法應該是：
ajax('...', function(result) { console.log(result);
})
複製代碼此時才能正確輸出請求返回的結果。
JS引擎其實並不提供異步的支持，異步支持主要依賴於運行環境(瀏覽器或Node.js)。
So, for example, when your JavaScript program makes an Ajax request to fetch some data from the server, you set up the “response” code in a function (the “callback”), and the JS Engine tells the hosting environment: “Hey, I’m going to suspend execution for now, but whenever you finish with that network request, and you have some data, please call this function back.”
The browser is then set up to listen for the response from the network, and when it has something to return to you, it will schedule the callback function to be executed by inserting it into the event loop.
上面這兩段話摘自於How JavaScript works，以通俗的方式解釋了JS如何調用回調函數實現異步處理。
所以什麼是Event Loop?
Event Loop只做一件事情，負責監聽Call Stack和Callback Queue。當Call Stack裏面的調用棧運行完變成空了，Event Loop就把Callback Queue裏面的第一條事件(其實就是回調函數)放到調用棧中並執行它，後續不斷循環執行這個操作。
一個setTimeout的例子以及對應的Event Loop動態圖：
console.log('Hi');
setTimeout(function cb1() {
console.log('cb1');
}, 5000);console.log('Bye');
複製代碼setTimeout有個要注意的地方，如上述例子延遲5s執行，不是嚴格意義上的5s，正確來說是至少5s以後會執行。因爲Web API會設定一個5s的定時器，時間到期後將回調函數加到隊列中，此時該回調函數還不一定會馬上運行，因爲隊列中可能還有之前加入的其他回調函數，而且還必須等到Call Stack空了之後纔會從隊列中取一個回調執行。
所以常見的setTimeout(callback, 0) 的做法就是爲了在常規的調用介紹後馬上運行回調函數。
console.log('Hi');
setTimeout(function() { console.log('callback');
}, 0);console.log('Bye');// 輸出// Hi// Bye// callback複製代碼在說一個容易犯錯的栗子：
for (var i = 0; i < 5; i++) {
setTimeout(function() { console.log(i);
}, 1000 * i);
}
// 輸出：5 5 5 5 5複製代碼上面這個栗子並不是輸出0，1，2，3，4，第一反應覺得應該是這樣。但梳理了JS的時間循環後，應該很容易明白。
調用棧先執行 for(var i = 0; i < 5; i++) {...}方法，裏面的定時器會到時間後會直接把回調函數放到事件隊列中，等for循環執行完在依次取出放進調用棧。當for循環執行完時，i的值已經變成5，所以最後輸出全都是5。
關於定時器又可以看看這篇有意思的文章
最後關於Event Loop，可以參考下這個視頻。到目前爲止說的event loop是前端瀏覽器中的event loop，關於Nodejs的Event Loop的細節闡述，請看我的另一篇文章Node.js design pattern : Reactor (Event Loop)。兩者的區別對比可查看這篇文章你不知道的Event Loop，對兩種event loop做了相關總結和比較。
總結
最後總結一下，JS的運行原理主要有以下幾個方面：
JS引擎主要負責把JS代碼轉爲機器能執行的機器碼，而JS代碼中調用的一些WEB API則由其運行環境提供，這裏指的是瀏覽器。
JS是單線程運行，每次都從調用棧出取出代碼進行調用。如果當前代碼非常耗時，則會阻塞當前線程導致瀏覽器卡頓。
回調函數是通過加入到事件隊列中，等待Event Loop拿出並放到調用棧中進行調用。只有Event Loop監聽到調用棧爲空時，纔會從事件隊列中從隊頭拿出回調函數放進調用棧裏。