有沒有想過浏覽器如何讀取和運作JS代碼？ 這看起來很神奇，我們可以通過浏覽器提供的控制台來了解背後的一些原理。
在Chrome中打開浏覽器控制台，然後檢視Sources這欄，在右側可以到一個 Call Stack 盒子。
JS 引擎是一個可以編譯和解釋我們的JS代碼強大的元件。 最受歡迎的JS 引擎是V8，由 Google Chrome 和 Node.j s使用，SpiderMonkey 用于Firefox，以及Safari/WebKit使用的 JavaScriptCore。
雖然現在 JS 引擎不是幫我們處理全面的工作。但是每個引擎中都有一些較小的元件為我們做繁瑣的的工作。
其中一個元件是調用堆棧(Call Stack)，與全局記憶體和執行上下文一起運作我們的代碼。
Js 引擎和全局記憶體(Global Memory)
JavaScript 是編譯語言同時也是解釋語言。信不信由你，JS 引擎在執行代碼之前隻需要幾微秒就能編譯代碼。
這聽起來很神奇，對吧?這種神奇的功能稱為JIT(即時編譯)。這個是一個很大的話題，一本書都不足以描述JIT是如何工作的。但現在，我們午飯可以跳過編譯背後的理論，将重點放在執行階段，盡管如此，這仍然很有趣。
考慮以下代碼：
var num = 2;
function pow(num) {
return num * num;
}
如果問你如何在浏覽器中處理上述代碼？ 你會說些什麼？ 你可能會說“浏覽器讀取代碼”或“浏覽器執行代碼”。
現實比這更微妙。首先，讀取這段代碼的不是浏覽器，是JS引擎。JS引擎讀取代碼，一旦遇到第一行，就會将幾個引用放入全局記憶體。
**全局記憶體(也稱為堆)**JS引擎儲存變量和函數聲明的地方。是以，回到上面示例，當 JS引擎讀取上面的代碼時，全局記憶體中放入了兩個綁定。
即使示例隻有變量和函數，也要考慮你的JS代碼在更大的環境中運作：在浏覽器中或在Node.js中。 在這些環境中，有許多預定義的函數和變量，稱為全局變量。
上例中，沒有執行任何操作，但是如果我們像這樣運作函數會怎麼樣呢：
var num = 2;
function pow(num) {
return num * num;
}
pow(num);
現在事情變得有趣了。當函數被調用時，JavaScript引擎會為全局執行上下文和調用棧騰出空間。
JS引擎:它們是如何工作的? 全局執行上下文和調用堆棧
剛剛了解了 JS引擎如何讀取變量和函數聲明，它們最終被放入了全局記憶體(堆)中。
但現在我們執行了一個JS函數，JS引擎必須處理它。怎麼做？每個JS引擎中都有一個基本元件，叫調用堆棧。
調用堆棧是一個堆棧資料結構：這意味着元素可以從頂部進入，但如果它們上面有一些元素，它們就不能離開，JS 函數就是這樣的。
一旦執行，如果其他函數仍然被阻塞，它們就不能離開調用堆棧。請注意，這個有助于你了解“JavaScript是單線程的”這句話。
回到我們的例子，當函數被調用時，JS引擎将該函數推入調用堆棧
同時，JS 引擎還配置設定了一個全局執行上下文，這是運作JS代碼的全局環境，如下所示
想象全局執行上下文是一個海洋，其中全局函數像魚一樣遊動，多美好！ 但現實遠非那麼簡單， 如果我函數有一些嵌套變量或一個或多個内部函數怎麼辦？
即使是像下面這樣的簡單變化，JS引擎也會建立一個本地執行上下文:
var num = 2;
function pow(num) {
var fixed = 89;
return num * num;
}
pow(num);
注意，我在pow函數中添加了一個名為fixed的變量。在這種情況下，pow函數中會建立一個本地執行上下文，fixed 變量被放入pow函數中的本地執行上下文中。
對于嵌套函數的每個嵌套函數，引擎都會建立更多的本地執行上下文。
JavaScript 是單線程和其他有趣的故事
JavaScript是單線程的，因為隻有一個調用堆棧處理我們的函數。也就是說，如果有其他函數等待執行，函數就不能離開調用堆棧。
在處理同步代碼時，這不是問題。例如，兩個數字之間的和是同步的，以微秒為機關。但如果涉及異步的時候，怎麼辦呢?
幸運的是，預設情況下JS引擎是異步的。即使它一次執行一個函數，也有一種方法可以讓外部（如：浏覽器）執行速度較慢的函數，稍後探讨這個主題。
當浏覽器加載某些JS代碼時，JS引擎會逐行讀取并執行以下步驟：
将變量和函數的聲明放入全局記憶體(堆)中
将函數的調用放入調用堆棧
建立全局執行上下文，在其中執行全局函數
建立多個本地執行上下文(如果有内部變量或嵌套函數)
到目前為止，對JS引擎的同步機制有了基本的了解。 在接下來的部分中，講講 JS 異步工作原理。
異步JS，回調隊列和事件循環
全局記憶體(堆)，執行上下文和調用堆棧解釋了同步 JS 代碼在浏覽器中的運作方式。 然而，我們遺漏了一些東西，當有一些異步函數運作時會發生什麼？
請記住，調用堆棧一次可以執行一個函數，甚至一個阻塞函數也可以直接當機浏覽器。 幸運的是JavaScript引擎是聰明的，并且在浏覽器的幫助下可以解決問題。
當我們運作一個異步函數時，浏覽器接受該函數并運作它。考慮如下代碼：
setTimeout(callback, 10000);
function callback(){
console.log('hello timer!');
}
setTimeout 大家都知道得用得很多次了，但你可能不知道它不是内置的JS函數。 也就是說，當JS 出現，語言中沒有内置的setTimeout。
setTimeout浏覽器API( Browser API)的一部分，它是浏覽器免費提供給我們的一組友善的工具。這在實戰中意味着什麼?由于setTimeout是一個浏覽器的一個Api，函數由浏覽器直接運作(它會在調用堆棧中出現一會兒，但會立即删除)。
10秒後，浏覽器接受我們傳入的回調函數并将其移動到回調隊列(Callback Queu)中。。考慮以下代碼
var num = 2;
function pow(num) {
return num * num;
}
pow(num);
setTimeout(callback, 10000);
function callback(){
console.log('hello timer!');
}
示意圖如下：
如你所見，setTimeout在浏覽器上下文中運作。 10秒後，計時器被觸發，回調函數準備運作。 但首先它必須通過回調隊列(Callback Queue)。 回調隊列是一個隊列資料結構，回調隊列是一個有序的函數隊列。
每個異步函數在被放入調用堆棧之前必須通過回調隊列，但這個工作是誰做的呢，那就是事件循環(Event Loop)。
事件循環隻有一個任務:它檢查調用堆棧是否為空。如果回調隊列中(Callback Queue)有某個函數，并且調用堆棧是空閑的，那麼就将其放入調用堆棧中。
完成後，執行該函數。 以下是用于處理異步和同步代碼的JS引擎的圖：
想象一下，callback() 已準備好執行，當 pow() 完成時，調用堆棧(Call Stack) 為空，事件循環(Event Look) 将 callback() 放入調用堆中。大概就是這樣，如果你了解了上面的插圖，那麼你就可以了解所有的JavaScript了。
回調地獄和 ES6 中的Promises
JS 中回調函數無處不在，它們用于同步和異步代碼。 考慮如下map方法：
function mapper(element){
return element * 2;
}
[1, 2, 3, 4, 5].map(mapper);
mapper是一個在map内部傳遞的回調函數。上面的代碼是同步的，考慮異步的情況：
function runMeEvery(){
console.log('Ran!');
}
setInterval(runMeEvery, 5000);
該代碼是異步的，我們在setInterval中傳遞回調runMeEvery。回調在JS中無處不在，是以就會出現了一個問題:回調地獄。
JavaScript 中的回調地獄指的是一種程式設計風格，其中回調嵌套在回調函數中，而回調函數又嵌套在其他回調函數中。由于 JS 異步特性，js 程式員多年來陷入了這個陷阱。
說實話，我從來沒有遇到過極端的回調金字塔，這可能是因為我重視可讀代碼，而且我總是堅持這個原則。如果你在遇到了回調地獄的問題，說明你的函數做得太多。
這裡不會讨論回調地獄，如果你好奇，有一個網站，callbackhell.com，它更詳細地探索了這個問題，并提供了一些解決方案。
我們現在要關注的是ES6的 Promises。ES6 Promises是JS語言的一個補充，旨在解決可怕的回調地獄。但什麼是 Promises 呢?
JS的 Promise是未來事件的表示。 Promise 可以以成功結束：用行話說我們已經解決了resolved(fulfilled)。 但如果 Promise 出錯，我們會說它處于**拒絕(rejected )狀态。 Promise 也有一個預設狀态：每個新的 Promise 都以挂起(pending)**狀态開始。
建立和使用 JavaScript 的 Promises
要建立一個新的 Promise，可以通過傳遞回調函數來調用 Promise 構造函數。回調函數可以接受兩個參數:resolve和reject。如下所示：
const myPromise = new Promise(function(resolve){
setTimeout(function(){
resolve()
}, 5000)
});
如下所示，resolve是一個函數，調用它是為了使Promise 成功，别外也可以使用 reject 來表示調用失敗。
const myPromise = new Promise(function(resolve, reject){
setTimeout(function(){
reject()
}, 5000)
});
注意，在第一個示例中可以省略reject，因為它是第二個參數。但是，如果打算使用reject，則不能忽略resolve，如下所示，最終将得到一個resolved 的承諾，而非 reject。
// 不能忽略 resolve !
const myPromise = new Promise(function(reject){
setTimeout(function(){
reject()
}, 5000)
});
現在，Promises看起來并不那麼有用，我們可以向它添加一些資料，如下所示：
const myPromise = new Promise(function(resolve) {
resolve([{ name: "Chris" }]);
});
但我們仍然看不到任何資料。 要從Promise中提取資料，需要連結一個名為then的方法。 它需要一個回調來接收實際資料：
const myPromise = new Promise(function(resolve, reject) {
resolve([{ name: "Chris" }]);
});
myPromise.then(function(data) {
console.log(data);
});
Promises 的錯誤處理
對于同步代碼而言，JS 錯誤處理大都很簡單，如下所示：
function makeAnError() {
throw Error("Sorry mate!");
}
try {
makeAnError();
} catch (error) {
console.log("Catching the error! " + error);
}
将會輸出：
Catching the error! Error: Sorry mate!
現在嘗試使用異步函數：
function makeAnError() {
throw Error("Sorry mate!");
}
try {
setTimeout(makeAnError, 5000);
} catch (error) {
console.log("Catching the error! " + error);
由于setTimeout，上面的代碼是異步的，看看運作會發生什麼：
throw Error("Sorry mate!");
^
Error: Sorry mate!
at Timeout.makeAnError [as _onTimeout] (/home/valentino/Code/piccolo-javascript/async.js:2:9)
這次的輸出是不同的。錯誤沒有通過catch塊，它可以自由地在堆棧中向上傳播。
那是因為try/catch僅适用于同步代碼。 如果你很好奇，Node.js中的錯誤處理會詳細解釋這個問題。
幸運的是，Promise 有一種處理異步錯誤的方法，就像它們是同步的一樣：
const myPromise = new Promise(function(resolve, reject) {
reject('Errored, sorry!');
});
在上面的例子中，我們可以使用catch處理程式處理錯誤：
const myPromise = new Promise(function(resolve, reject) {
reject('Errored, sorry!');
});
myPromise.catch(err => console.log(err));
我們也可以調用Promise.reject()來建立和拒絕一個Promise
Promises 組合：Promise.all，Promise.allSettled， Promise.any
Promise API 提供了許多将Promise組合在一起的方法。 其中最有用的是Promise.all，它接受一個Promises數組并傳回一個Promise。 如果參數中 promise 有一個失敗（rejected），此執行個體回調失敗（reject），失敗原因的是第一個失敗 promise 的結果。
Promise.race(iterable) 方法傳回一個 promise，一旦疊代器中的某個promise解決或拒絕，傳回的 promise就會解決或拒絕。
較新版本的V8也将實作兩個新的組合：Promise.allSettled和Promise.any。 Promise.any仍然處于提案的早期階段：在撰寫本文時，仍然沒有浏覽器支援它。
Promise.any可以表明任何Promise是否fullfilled。 與 Promise.race的差別在于Promise.any不會拒絕即使其中一個Promise被拒絕。
無論如何，兩者中最有趣的是 Promise.allSettled，它也是 Promise 數組，但如果其中一個Promise拒絕，它不會短路。 當你想要檢查Promise數組是否全部已解決時，它是有用的，無論最終是否拒絕，可以把它想象成Promise.all 的反對者。
異步進化：從Promises 到 async/await
ECMAScript 2017 (ES8)的出現，推出了新的文法誕生了async/await。
async/await隻是Promise 文法糖。它隻是一種基于Promises編寫異步代碼的新方法， async/await 不會以任何方式改變JS，請記住，JS必須向後相容舊浏覽器，不應破壞現有代碼。
來個例子：
const myPromise = new Promise(function(resolve, reject) {
resolve([{ name: "Chris" }]);
});
myPromise.then((data) => console.log(data))
使用async/await, 我們可以将Promise包裝在标記為async的函數中，然後等待結果的傳回：
const myPromise = new Promise(function(resolve, reject) {
resolve([{ name: "Chris" }]);
});
async function getData() {
const data = await myPromise;
console.log(data);
}
getData();
有趣的是，async 函數也會傳回Promise，你也可以這樣做：
async function getData() {
const data = await myPromise;
return data;
}
getData().then(data => console.log(data));
那如何處理錯誤？ async/await提一個好處就是可以使用try/catch。 再看一下Promise，我們使用catch處理程式來處理錯誤：
const myPromise = new Promise(function(resolve, reject) {
reject('Errored, sorry!');
});
myPromise.catch(err => console.log(err));
使用async函數，我們可以重構以上代碼：
async function getData() {
try {
const data = await myPromise;
console.log(data);
// or return the data with return data
} catch (error) {
console.log(error);
}
}
getData();
并不是每個人都喜歡這種風格。try/catch會使代碼變得冗長，在使用try/catch時，還有另一個怪異的地方需要指出，如下所示：
async function getData() {
try {
if (true) {
throw Error("Catch me if you can");
}
} catch (err) {
console.log(err.message);
}
}
getData()
.then(() => console.log("I will run no matter what!"))
.catch(() => console.log("Catching err"));
運作結果：
以上兩個字元串都會列印。 請記住， try/catch 是一個同步構造，但我們的異步函數産生一個Promise。 他們在兩條不同的軌道上行駛，比如兩列火車。但他們永遠不會見面， 也就是說，throw 抛出的錯誤永遠不會觸發**getData()**的catch方法。
實戰中，我們不希望throw觸then的處理程式。 一種的解決方案是從函數傳回Promise.reject()：
async function getData() {
try {
if (true) {
return Promise.reject("Catch me if you can");
}
} catch (err) {
console.log(err.message);
}
}
現在按預期處理錯誤
getData()
.then(() => console.log("I will NOT run no matter what!"))
.catch(() => console.log("Catching err"));
"Catching err" // 輸出
除此之外，async/await似乎是在JS中建構異步代碼的最佳方式。 我們可以更好地控制錯誤處理，代碼看起來也更清晰。
總結
JS 是一種用于Web的腳本語言，具有先編譯然後由引擎解釋的特性。 在最流行的JS引擎中，有谷歌Chrome和Node.js使用的V8，有Firefox建構的SpiderMonkey，以及Safari使用的JavaScriptCore。
JS引擎包含很有元件:調用堆棧、全局記憶體(堆)、事件循環、回調隊列。所有這些元件一起工作，完美地進行了調優，以處理JS中的同步和異步代碼。
JS引擎是單線程的，這意味着運作函數隻有一個調用堆棧。這一限制是JS異步本質的基礎:所有需要時間的操作都必須由外部實體(例如浏覽器)或回調函數負責。
為了簡化異步代碼流，ECMAScript 2015 給我們帶來了Promise。 Promise 是一個異步對象，用于表示任何異步操作的失敗或成功。 但改進并沒有止步于此。 在2017年，async/ await誕生了：它是Promise的一種風格彌補，使得編寫異步代碼成為可能，就好像它是同步的一樣。