---
title: JavaScript觀念
tag: js
---
<!-- [TOC] -->

# JavaScript 是如何在 Browser 運作?
==[關鍵字]==
JS: Heap, Call Stack
Browser: Web APIs, Event Loop, Callback Queue

## 前言
學習前端開發時，了解每一行程式的執行順序蠻重要的。一開始不太了解底層知識時，會覺得應該是會按照程式編寫的順序進行，可實際用Debug執行時，卻又不是那麼一回事，閱讀完 [Felix Gerschau](https://felixgerschau.com/) 的文章後，才有比較深刻的了解。
***


## Call Stack 呼叫堆疊
**JavaScript is single-threaded:** JavaScript 只能在同一時間點做一件事情，因為只有一個 Call Stack。

**Call Stack** 是 JavaScript 用來追蹤呼叫 fuctions 的機制，每次只要有一個 function 被呼叫，就會增加該 fucntion 到 stack 的最上面，採 LIFO(Last In, First Out)，如果該 function 完成就會從 call stack 移除。

**function 的結束判斷:** 是否有回傳或是已經是到達 function 結束的範圍。

**Uncaught RangeError: Maximum call stack size exceeded**
表示呼叫的 fucntions 數量已經超出 Call Stack 的範圍了，最常發生在寫了無窮迴圈的程式碼。

## Heap 堆積

Heap 是當我們定義 functions 或是 variables 時，JavaScript 用來儲存 Objects 的地方。

## Web APIs
Web APIs 是 browser 提供的 API，使用這些 API 可以在 browser 同一時間做很多事情。我們可以在 JavaScript 裡呼叫這些 API，而這些 API 是由 browser 負責處理，所以不會阻擋到 JavaScript 的 Call Stack。比較常見的例如: setTimeout/setInterval，AJAX request 或是操作DOM。

## Callback queue 呼叫佇列
當我們呼叫 Web APIs，呼叫的 API 完成之後會回傳一個 callback function，該 callback function 會儲存在 Callback queue 裡。Callback queue 裡的 Callback 採 FIFO(First In, First Out，也就是先完成的 API 的 callback 先儲存在 callback queue 裡面，直到 Call Stack 裡的堆疊是空的，Callback queue 才會透過 Event Loop 拿取最前頭的 callback 並且增加到 Call Stack 裡執行。

什麼是callback: callback 是一個 function 當成參數(argument)帶入到另一個 function 裡面。callback 會等到另一個 function 的程式碼執行完成之後，才會執行 callback 裡面的程式碼。

例如:

寫法1:
setTimeout(callback, 1000)

function callback() {
    console.log('hello')
}

寫法2:
setTimeout(function callback() {
    console.log('hello')
}, 1000)

寫法3:
setTimeout(() => {
    console.log('hello')
}, 1000)

## Event Loop 事件循環

JavaScript 的 event loop 只要 Call Stack 現在的堆疊是空的，就會從 Callback queue 裡面拿取最前頭 callback 並且增加到 Call Stack 裡執行。

## 結語

## 參考資料
- https://felixgerschau.com/javascript-event-loop-call-stack/

相關概念=> {stack、heap} JavaScript 的記憶體管理