關於JavaScript中的「CallStack」、「Blocking」、「Async Callback」、「Event loop」的學習筆記

    AllenLi
    Coding

    JavaScript是屬於「Single Thread」的程式語言，同時程式碼會將函式「Stack」之後，進行逐條編碼的執行，又稱為「Call Stack」。

    Call Stack:

    function multiply(a, b) {
    return a * b
}

function square(n) {
    return multiply(n ,n)
}

function printSquare(n) {
    var square = square(n)
    console.log(squared)
}
printSquare(4)

    source:CallStack.replit

    執行「function」呼叫的時候，會依序將函式層層堆疊，同時單一段落程式碼完成後即消失，詳如下圖：

    CallStack

    Infinite Loop:
    呼叫執行函式，再回傳的時候仍執行原函式，導致無法停止執行，也就是無窮迴圈的窘境。

    function foo() {
    return foo()
}
foo()

    source:Infinite Loop.replit

    infiniteLoop

    Blocking:
    當執行程式碼時發生等待很長一段時間沒有反應，或是多個請求同時進行，導致排擠而無法渲染畫面，稱之為「阻塞」。

    var foo = $.getSync('//foo.com')
var bar = $.getSync('//bar.com')
var qux = $.getSync('//qux.com')

console.log(foo)
console.log(bar)
console.log(qux)

    source:Blocking.replit
    blocking

    Async Callback:
    這是「Event loop」在同步執行上會發揮作用的部分。我們運用「setTimeout」呼叫堆疊的方式，來模擬非同步的請求。

    console.log('h1')

setTimeout(function() {
  console.log('there')
}, 5000)

console.log('JSConfEU')

    source:Async Callback.replit
    asyncCallback

    Event loop:
    事件循環的功能就像是查看堆疊中的任務，如果堆疊是空的，他就會將第一個事件放到佇列上，並將接下來的事件往上疊加，讓堆疊能有效的執行。

    eventloop

    Simulation:
    eventloopchart

    專有名詞：
    Single Thread(單執行緒)：一次執行一段程式碼。
    Call Stack(呼叫堆疊)：依函式中層層的呼叫，並依序由下往上排序，類似「先進後出」的概念。
    Async Callback(非同步呼叫堆疊)：先執行Context，在處理「event queue」。

    source：Philip Roberts 在 JS Conf 的演講影片

    Related Posts