在Github上看到一個關于JavaScript開發者應懂的33個概念，個人認為里面的內容還是挺常見的，因此打算根據其目錄對JavaScript進行一次知識點的梳理。
附上其GitHub地址：
https://github.com/stephentian/33-js-concepts
關于JavaScript
JS是一門單線程語言，它有一個調用棧（Call Stack）—— 后進先出，當函數執行時，函數會先進入到調用棧當中；JS會根據調用棧的次序，一步步往下執行代碼，直到調用棧清空。舉個簡單的例子：
function first() {
console.log('first')
second()
}
function second() {
console.log('second')
}
first()
console.log('Hi JavaScript')
此時，JS的調用棧情況如下：
程序開始，調用棧為空，程序自上而下開始執行，當遇到函數時，則會將其放進調用棧并進入函數內繼續執行，若在函數內部遇到其他函數，也會進行同樣的操作，只到函數執行完成后，則會退出調用棧，繼續執行當前函數直到結束。
而我們需要一個環境可以運行JS代碼，這時候就需要JS引擎，JS引擎有很多，當前我們聽的最多的就是Google開發的V8引擎了，下面是一個實現了JavaScript引擎的流行項目列表：
V8? — ?開源，由 Google 開發，用 C ++ 編寫
Rhino — ?由 Mozilla 基金會管理，開源，完全用 Java 開發
SpiderMonkey? —? 是第一個支持 Netscape Navigator 的 JavaScript 引擎，目前正供 Firefox 使用
JavaScriptCore? — ?開源，由蘋果公司為 Safari 開發
KJS — ?KDE 的引擎，最初由 Harri Porten 為 KDE 項目中的 Konqueror 網頁瀏覽器開發
Chakra (JScript9) — ?Internet Explorer
Chakra (JavaScript)? —? Microsoft Edge
Nashorn, 作為 OpenJDK 的一部分，由 Oracle Java 語言和工具組編寫
JerryScript — 物聯網的輕量級引擎
JavaScript引擎
它主要由兩部分組成：
內存堆：這是內存分配的地方
調用棧：這是你的代碼執行時的地方
平常我們運行的JS代碼就是運行在JS引擎當中，它其中的運行環境如下圖所示：
因此，JS在引擎下執行并不像上述例子這么簡單，代碼自上而下執行就完事了。JS在瀏覽下的引擎執行，瀏覽器本身還會提供很多引擎之外的Web API，最終產生了事件循環、任務隊列這些概念。
事件循環
JS的任務分為兩類：同步任務和異步任務
同步任務都在主線程上執行，形成一個
執行棧主線程以外，
事件觸發線程管理著一個任務隊列，只要異步任務有了結果就會往任務隊列中添加當執行棧的同步任務執行完成后，系統就會依次讀取任務隊列中的事件到執行棧中執行
其中，這里的任務隊列還分為宏任務（macrotask）和微任務（microtask）
宏任務包括：
整體代碼script，setTimeout，setInterval
微任務包括：
Promise，process.nextTick
總結
簡單總結事件循環的執行順序：
程序開始首先在調用棧中開始執行同步任務（個人理解：宏任務當中也包括了同步任務，所以可以理解為程序開始首先執行宏任務）。
當執行過程中遇到了異步任務，此時就會將其放入任務隊列（此時區分宏任務和微任務環境）當中，等待調用棧進入空閑狀態。
當調用棧執行完成當前宏任務后，就會將進入微任務的事件依次執行，直到微任務列表清空再次開啟新一輪的宏任務。
如此循環直到所有事件執行完畢
舉例
下面例子幫助理解：
console.log('1');
setTimeout(function() {
console.log('2');
process.nextTick(function() {
console.log('3');
})
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
console.log('5')
})
})
process.nextTick(function() {
console.log('6');
})
new Promise(function(resolve) {
console.log('7');
resolve();
}).then(function() {
console.log('8')
})
setTimeout(function() {
console.log('9');
process.nextTick(function() {
console.log('10');
})
new Promise(function(resolve) {
console.log('11');
resolve();
}).then(function() {
console.log('12')
})
})
我們來看這個例子的執行過程：
首先，程序開始執行整體script代碼（此時可以看作一個宏任務環境），代碼從上到下依次執行。
遇到console.log('1')，輸出1，``new Promise`屬于同步任務，其then屬于異步任務
-
然后，代碼依次遇到
setTimeout、process.nextTick、new Promise.then、setTimeout，我們依次對它們進行‘分類'：這里的宏任務是兩個setTimeout
微任務依次是process.nextTick、promise.then操作
因此，第一輪宏任務結束下來輸出：1 7 6 8
接下來是新的一輪宏任務，既第一次出現的setTimeout，分析思路仍然和上述一樣，依次對其'分類'，結果就會一目了然。
這里只是針對JS的事件循環進行了分析，也只是JS執行機制的一部分，但從JS執行機制的角度出發，會發現還有很多地方還是懵懵懂懂的，但因為知識儲備不扎實，仍然有很多地方無法理解，仍需要進一步學習。
參考資料
本文參考了多篇文章，參考資料如下：
-
從瀏覽器多進程到JS單線程，JS運行機制最全面的一次梳理
http://www.dailichun.com/2018/01/21/js_singlethread_eventloop.html
（這篇文章分析的很好，對JS運行機制涉及的知識點都進行了分析、梳理，看完可以有一個整體的認知）
-
這一次，徹底弄懂 JavaScript 執行機制
https://juejin.im/post/59e85eebf265da430d571f89#heading-4
（這篇文章主要講解了JS的事件循環，例子是從這里摘取的，同時也在這里學習了如何分析整個事件循環的過程）
-
[譯] JavaScript 如何工作：對引擎、運行時、調用堆棧的概述
https://juejin.im/post/5a05b4576fb9a04519690d42#heading-2
（這篇文章主要了解JS的一些常識性知識，之前一直不清楚JS引擎是怎么一回事）
-
深入理解js事件循環機制（瀏覽器篇）
