什麼是call stack (java script 教學筆記)
- 白話說明
- 詳細定義
- 示範一
- 示範二
1.白話說明
直接舉例來說吧！
假設我們希望讓身體消化掉一顆蘋果，所以簡單將這一連串動作拆解如下：
(1)蘋果在嘴裡咬下去 //完成最終目的的手段之一
(2)蘋果碎掉經過食道 //完成最終目的的手段之二
(3)蘋果掉入胃，開始消化吸收 //最終目的
--------------------------------------------------------------------------------------------------
這邊有三個函數(1)嘴咬(2)經過(3)消化，以及一個變數(蘋果)，(蘋果)可以用任何其他食物來取代。
--------------------------------------------------------------------------------------------------
在現實生活中，上述是有因果關係的，必須要按照(1)，(2)，(3)的順序，才能達到我們"消化掉蘋果"的目的。
那麼在 javascript 的數位世界中，這事情要怎麼發生呢？
這邊我們把 javascript 擬人化，叫做 JS 好了。
JS 執行的順序，會是 (3) => (2) => (1) => (1) => (2) => (3)
也就是他必須先了解整件事情的來龍去脈，再正式來做這件事情。
在(3) => (2) => (1)，這段路，名偵探 JS ，會按最終目的"消化蘋果"，開始反向追查出要如何完成"消化蘋果"的所有動作以及順序。
JS 理解，為了消化，東西必須先經過食道，為了經過食道，必須先咬他... 大致上是這樣吧？
然後 JS 才開始
(1) => (2) => (3)，這段路，並按順序執行一連串的正確動作。
上述JS 追蹤辦案的一連串經過，大概就可以叫做 call stack 了。
因此，最後被發現的必要動作"咬蘋果"，也將會是第一個被執行掉的動作"咬蘋果"
這就是後面定義裡所說的，LIFO(last in first out, 後到先出)的機制啦。
2.詳細定義
(有點火星語，看不懂看白話就好)
(1)call stack 是 javascript 用來持續追蹤(track)腳本(script)內，呼叫多重函數(multiple functions)時的一種機制。
(2)call stack 是 javascript 在呼叫多重函數時，確認 javacript 自己(假設它有靈魂和身體的話)，正在那裡執行哪個函數(function)的機制。
(3)javascript處理多重函數(multiple functions)，使用的是LIFO(last in first out, 後到先出)的機制。
(4)而 stack 是電腦基礎的資料結構，這裡的函數是stack的(後面有示範)
3.示範一
以下是"三個邊長輸入後，判斷是否為直角三角形的多重函數"
------------------------------
function multiply(x, y) {
return x * y
};
function square(x) {
return multiply(x, x)
};
function isRightTriangle(a, b, c) {
return square(a) + square(b) === square(c)
};
isRightTriangle(3, 4, 5) //答案會是true
-------------------------------
接著我們連結到loupe這個網址，把code輸入到左上角，再點選save and run讓他跑看看...
我們可以按下左上角的 Pause (暫停) 或 Resume (恢復) ，來觀察 JS 執行 Call Stack 的經過(觀察中間上面Call Stack的格窗）
(其他格子先不用觀察，那些是後續的課題)
我們可以發現，JS 為了獲得 isRightTriangle(3, 4, 5) 的答案，反覆向上查案的經過.....
得出的流程大概是：
先查出 square(a)的方法順序，然後求出square(a)的答案
再查出 square(b)的方法順序，然後求出square(b)的答案
再查出 square(c)的方法順序，然後求出square(c)的答案
最後再比對是否成真
多看幾次就可以了解了吧！
4.示範二
其實，Google Chrome也有類似示範一的功能，其目的是用來偵錯用的，在這裡我們可以拿來觀察call stack的動作。
首先打開一個html檔(index.html)，這html檔裡面，附帶連結到同個資料夾的某個js檔
這個js檔必須寫入上述的code
在網頁中 點右鍵 => 檢查 => 來源(source) =>左上角的網頁來源找到這個js檔
如下圖
接著我們點下 第17個步驟讓他反藍，設定程式的中斷點此，以利後續觀察call stack的動作
按下F5重新整理之後
我們可以運用下圖第三個小圖示的按鈕，就可以在中斷點下面的"範圍"欄內，觀察JS的動作了！
我們可以看到範圍欄內，JS 處理函數的順序和結果！
留言列表
