日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

說(shuō)到JAVAScript的運(yùn)行原理，自然繞不開(kāi)JS引擎，運(yùn)行上下文，單線程，事件循環(huán)，事件驅(qū)動(dòng)，回調(diào)函數(shù)等概念。本文主要參考文章[1,2]。

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

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

1.JS Engine

簡(jiǎn)單來(lái)說(shuō)，JS引擎主要是對(duì)JS代碼進(jìn)行詞法、語(yǔ)法等分析，通過(guò)編譯器將代碼編譯成可執(zhí)行的機(jī)器碼讓計(jì)算機(jī)去執(zhí)行。

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

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

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

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

關(guān)于閉包的情況，就涉及到Captured Variables。我們知道Local Variables是最簡(jiǎn)單的情形，是直接存儲(chǔ)在棧中的。而Captured Variables是對(duì)于存在閉包情況和with,try catch情況的變量。

function foo () {
 var x; // local variables
 var y; // captured variable, bar中引用了y
 function bar () {
 // bar 中的context會(huì)capture變量y
 use(y);
 }
 return bar;
}
復(fù)制代碼

如上述情況，變量y存在與bar()的閉包中，因此y是captured variable，是存儲(chǔ)在堆中的。

2.RunTime

JS在瀏覽器中可以調(diào)用瀏覽器提供的API，如window對(duì)象，DOM相關(guān)API等。這些接口并不是由V8引擎提供的，是存在與瀏覽器當(dāng)中的。因此簡(jiǎn)單來(lái)說(shuō)，對(duì)于這些相關(guān)的外部接口，可以在運(yùn)行時(shí)供JS調(diào)用，以及JS的事件循環(huán)(Event Loop)和事件隊(duì)列(Callback Queue)，把這些稱為RunTime。有些地方也把JS所用到的core lib核心庫(kù)也看作RunTime的一部分。

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

3.Call Stack

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

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

function foo() {
 foo();
}
foo();
復(fù)制代碼

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

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

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

4.Event%20Loop%20&%20Callback

JS通過(guò)回調(diào)的方式，異步處理耗時(shí)的任務(wù)。一個(gè)簡(jiǎn)單的例子：

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

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

ajax('...',%20function(result)%20{
%20console.log(result);
})
復(fù)制代碼

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

JS引擎其實(shí)并不提供異步的支持，異步支持主要依賴于運(yùn)行環(huán)境(瀏覽器或Node.js)。

So,%20for%20example,%20when%20your%20JavaScript%20program%20makes%20an%20Ajax%20request%20to%20fetch%20some%20data%20from%20the%20server,%20you%20set%20up%20the%20“response”%20code%20in%20a%20function%20(the%20“callback”),%20and%20the%20JS%20Engine%20tells%20the%20hosting%20environment:%20“Hey,%20I’m%20going%20to%20suspend%20execution%20for%20now,%20but%20whenever%20you%20finish%20with%20that%20network%20request,%20and%20you%20have%20some%20data,%20please%20call%20this%20function%20back.”

The%20browser%20is%20then%20set%20up%20to%20listen%20for%20the%20response%20from%20the%20network,%20and%20when%20it%20has%20something%20to%20return%20to%20you,%20it%20will%20schedule%20the%20callback%20function%20to%20be%20executed%20by%20inserting%20it%20into%20the%20event%20loop.

上面這兩段話摘自于How%20JavaScript%20works，以通俗的方式解釋了JS如何調(diào)用回調(diào)函數(shù)實(shí)現(xiàn)異步處理。

所以什么是Event%20Loop?

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

一個(gè)setTimeout的例子以及對(duì)應(yīng)的Event%20Loop動(dòng)態(tài)圖：

console.log('Hi');
setTimeout(function%20cb1()%20{%20
%20console.log('cb1');
},%205000);
console.log('Bye');
復(fù)制代碼

console.log('Hi');
setTimeout(function() {
 console.log('callback');
}, 0);
console.log('Bye');
// 輸出
// Hi
// Bye
// callback
復(fù)制代碼

for (var i = 0; i < 5; i++) {
 setTimeout(function() {
 console.log(i);
 }, 1000 * i);
}
	
// 輸出：5 5 5 5 5
復(fù)制代碼