說到JavaScript的運(yùn)行原理，自然繞不開JS引擎，運(yùn)行上下文，單線程，事件循環(huán)，事件驅(qū)動，回調(diào)函數(shù)等概念。

[[284890]]

為了更好的理解JavaScript如何工作的，首先要理解以下幾個概念。

• JS Engine(JS引擎)
• Runtime(運(yùn)行上下文)
• Call Stack (調(diào)用棧)
• Event Loop(事件循環(huán))
• Callback (回調(diào))

1.JS Engine

簡單來說，JS引擎主要是對JS代碼進(jìn)行詞法、語法等分析，通過編譯器將代碼編譯成可執(zhí)行的機(jī)器碼讓計算機(jī)去執(zhí)行。

目前最流行的JS引擎非V8莫屬了，Chrome瀏覽器和Node.js采用的引擎就是V8引擎。引擎的結(jié)構(gòu)可以簡單由下圖表示：

就如JVM虛擬機(jī)一樣，JS引擎中也有堆(Memory Heap)和棧(Call Stack)的概念。

• 棧。用來存儲方法調(diào)用的地方，以及基礎(chǔ)數(shù)據(jù)類型(如var a = 1)也是存儲在棧里面的，會隨著方法調(diào)用結(jié)束而自動銷毀掉(入棧-->方法調(diào)用后-->出棧)。
• 堆。JS引擎中給對象分配的內(nèi)存空間是放在堆中的。如var foo = {name: 'foo'} 那么這個foo所指向的對象是存儲在堆中的。

此外，JS中存在閉包的概念，對于基本類型變量如果存在與閉包當(dāng)中，那么也將存儲在堆中。詳細(xì)可見此處1,3

關(guān)于閉包的情況，就涉及到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在瀏覽器中可以調(diào)用瀏覽器提供的API，如window對象，DOM相關(guān)API等。這些接口并不是由V8引擎提供的，是存在與瀏覽器當(dāng)中的。因此簡單來說，對于這些相關(guān)的外部接口，可以在運(yùn)行時供JS調(diào)用，以及JS的事件循環(huán)(Event Loop)和事件隊列(Callback Queue)，把這些稱為RunTime。有些地方也把JS所用到的core lib核心庫也看作RunTime的一部分。

同樣，在Node.js中，可以把Node的各種庫提供的API稱為RunTime。所以可以這么理解，Chrome和Node.js都采用相同的V8引擎，但擁有不同的運(yùn)行環(huán)境(RunTime Environments)[4]。

3.Call Stack

JS被設(shè)計為單線程運(yùn)行的，這是因?yàn)镴S主要用來實(shí)現(xiàn)很多交互相關(guān)的操作，如DOM相關(guān)操作，如果是多線程會造成復(fù)雜的同步問題。因此JS自誕生以來就是單線程的，而且主線程都是用來進(jìn)行界面相關(guān)的渲染操作 (為什么說是主線程，因?yàn)镠TML5 提供了Web Worker，獨(dú)立的一個后臺JS，用來處理一些耗時數(shù)據(jù)操作。因?yàn)椴粫薷南嚓P(guān)DOM及頁面元素，因此不影響頁面性能)，如果有阻塞產(chǎn)生會導(dǎo)致瀏覽器卡死。

如果一個遞歸調(diào)用沒有終止條件，是一個死循環(huán)的話，會導(dǎo)致調(diào)用棧內(nèi)存不夠而溢出，如：

function foo() { 
 foo(); 
} 
foo(); 

例子中foo函數(shù)循環(huán)調(diào)用其本身，且沒有終止條件，瀏覽器控制臺輸出調(diào)用棧達(dá)到最大調(diào)用次數(shù)。

JS線程如果遇到比較耗時操作，如讀取文件，AJAX請求操作怎么辦?這里JS用到了Callback回調(diào)函數(shù)來處理。

對于Call Stack中的每個方法調(diào)用，都會形成它自己的一個執(zhí)行上下文Execution Context，關(guān)于執(zhí)行上下文的詳細(xì)闡述請看這篇文章

4.Event Loop & Callback

JS通過回調(diào)的方式，異步處理耗時的任務(wù)。一個簡單的例子：

var result = ajax('...');console.log(result);復(fù)制代碼

此時并不會得到result的值，result是undefined。這是因?yàn)閍jax的調(diào)用是異步的，當(dāng)前線程并不會等到ajax請求到結(jié)果后才執(zhí)行console.log語句。而是調(diào)用ajax后請求的操作交給回調(diào)函數(shù)，自己是立刻返回。正確的寫法應(yīng)該是：

ajax('...', function(result) { 
 console.log(result); 
}) 

此時才能正確輸出請求返回的結(jié)果。

JS引擎其實(shí)并不提供異步的支持，異步支持主要依賴于運(yùn)行環(huán)境(瀏覽器或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如何調(diào)用回調(diào)函數(shù)實(shí)現(xiàn)異步處理。

所以什么是Event Loop?

Event Loop只做一件事情，負(fù)責(zé)監(jiān)聽Call Stack和Callback Queue。當(dāng)Call Stack里面的調(diào)用棧運(yùn)行完變成空了，Event Loop就把Callback Queue里面的第一條事件(其實(shí)就是回調(diào)函數(shù))放到調(diào)用棧中并執(zhí)行它，后續(xù)不斷循環(huán)執(zhí)行這個操作。

一個setTimeout的例子以及對應(yīng)的Event Loop動態(tài)圖：

console.log('Hi'); 
setTimeout(function cb1() {  
 console.log('cb1'); 
}, 5000); 
console.log('Bye'); 

setTimeout有個要注意的地方，如上述例子延遲5s執(zhí)行，不是嚴(yán)格意義上的5s，正確來說是至少5s以后會執(zhí)行。因?yàn)閃eb API會設(shè)定一個5s的定時器，時間到期后將回調(diào)函數(shù)加到隊列中，此時該回調(diào)函數(shù)還不一定會馬上運(yùn)行，因?yàn)殛犃兄锌赡苓€有之前加入的其他回調(diào)函數(shù)，而且還必須等到Call Stack空了之后才會從隊列中取一個回調(diào)執(zhí)行。

所以常見的setTimeout(callback, 0) 的做法就是為了在常規(guī)的調(diào)用介紹后馬上運(yùn)行回調(diào)函數(shù)。

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，第一反應(yīng)覺得應(yīng)該是這樣。但梳理了JS的時間循環(huán)后，應(yīng)該很容易明白。

調(diào)用棧先執(zhí)行 for(var i = 0; i < 5; i++) {...}方法，里面的定時器會到時間后會直接把回調(diào)函數(shù)放到事件隊列中，等for循環(huán)執(zhí)行完在依次取出放進(jìn)調(diào)用棧。當(dāng)for循環(huán)執(zhí)行完時，i的值已經(jīng)變成5，所以最后輸出全都是5。

關(guān)于定時器又可以看看這篇有意思的文章

最后關(guān)于Event Loop，可以參考下這個視頻。到目前為止說的event loop是前端瀏覽器中的event loop，關(guān)于Nodejs的Event Loop的細(xì)節(jié)闡述，請看我的另一篇文章Node.js design pattern : Reactor (Event Loop)。兩者的區(qū)別對比可查看這篇文章你不知道的Event Loop，對兩種event loop做了相關(guān)總結(jié)和比較。

總結(jié)

最后總結(jié)一下，JS的運(yùn)行原理主要有以下幾個方面：

• JS引擎主要負(fù)責(zé)把JS代碼轉(zhuǎn)為機(jī)器能執(zhí)行的機(jī)器碼，而JS代碼中調(diào)用的一些WEB API則由其運(yùn)行環(huán)境提供，這里指的是瀏覽器。
• JS是單線程運(yùn)行，每次都從調(diào)用棧出取出代碼進(jìn)行調(diào)用。如果當(dāng)前代碼非常耗時，則會阻塞當(dāng)前線程導(dǎo)致瀏覽器卡頓。
• 回調(diào)函數(shù)是通過加入到事件隊列中，等待Event Loop拿出并放到調(diào)用棧中進(jìn)行調(diào)用。只有Event Loop監(jiān)聽到調(diào)用棧為空時，才會從事件隊列中從隊頭拿出回調(diào)函數(shù)放進(jìn)調(diào)用棧里。