Javascript基礎語法學習介紹3_Javascript背後運行原理(js引擎)_ExecutionStack
每一個瀏覽器都會配有一個對應javascript引擎
例如:
Google Chrome 採用 V8引擎(來自Google團隊開發)
---->底層是透過 C++進行開發的
https://zh.wikipedia.org/wiki/V8_(JavaScript引擎)
https://www.ibm.com/developerworks/cn/opensource/os-cn-v8engine/
Mozilla Firefox 採用 TraceMonkey
https://ithelp.ithome.com.tw/articles/10007775
這些我們稱為 javascript engine
Javascript Engine --> Parser --> machine code --> Execute
javascript engine 會去藉由 parser(解析器)進行解析
將所有看到的code(人腦看得懂的邏輯狀態)
轉換為 機械碼(001001110)
供給電腦、伺服器 可以去解析這些內容
並將一些網頁和動態程式放上Server端
才能去執行程式碼結果
這也是為何我們在之前文章示範很多變數宣告和撰寫時
可以立即在console中獲取才剛宣告並賦予數值內容的變數
值可立即回傳之原因
ExecutionStack (呼叫堆疊)
-->很多地方都會使用的一個程式開發觀念
也有人用 Call Stack 來稱呼
比方我們依序定義好了
first
second
third
三個function
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | //===========Execution Stack================== //Global Variable(Execution Context) var name = 'Kevin'; //Execution Context1 function first(){ var a = 'Hello '; console.log(a + name); } //Execution Context2 function Second(){ var b = 'Nice jacket '; console.log(b+name); } //Execution Context3 function Third(){ var c = 'How mush is it '; console.log(c+name); } first() Second() Third() |
再依序呼叫他們
這次我們在進行一些修改
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | //===========Execution Stack================== //Global Variable(Execution Context) var name = 'Kevin'; //Execution Context1 function first(){ var a = 'Hello '; Second(); console.log(a + name); } //Execution Context2 function Second(){ var b = 'Nice jacket '; Third(); console.log(b+name); } //Execution Context3 function Third(){ var c = 'How mush is it '; console.log(c+name); } first() |
於 first 函式中去call 我們所謂的 Second()
再去 Second() Call我們的Third()
此時我們只去底下呼叫一次first()
主要是因為當整個程式碼區塊運行時
會進入到 Execution Stack 中
中文也有人稱為 「呼叫堆疊」
==> 程式每一次只會運行其中特定某一區塊功能
或者我們也可以稱為一個任務
這裡或許會好奇為何有需要用到Stack呢??
主要是為了讓電腦能夠記憶這些變數或是Procedure呼叫位置紀錄
供後續執行進展的Trace
至於 「堆疊」一詞就牽涉到所謂的資料結構觀念
於最頂不的變數name
屬於一個全域的變數內容
下方的則為一個一個的function都會於有被呼叫時建立
執行任務內容/Execution Context
這裡可以
將呼叫Procedure(程式讀進來存放)過程想像成洗碗盤時你會一個一個疊起來(下至上)
將這些函式於運行中調用順序
想像成從盤子碟盤中拿取盤子的過程(上往下)
==>後進先出特性(FILO, First-in-Last-out)
放盤子即 Push
拿取盤子動作即 Pop
讓我們用第一段程式例子來看
最一開始呼叫的Procedure 是
first()
所以就先push進到Execution Stack當中堆放
之後結束運行完該區塊再Pop出去(可能放到烘碗機或是餐盤架上)
之後為Second()
一樣又 Push進到Execution(Call) Stack當中
之後結束運行完該區塊再Pop出去
最後呼叫的是 Third()
如同上面的行為
第二案例的程式段落
最一開始呼叫的Procedure為first()
所以第一個盤子就堆放進來了
每一個functon於運行過程中當執行到定義區塊都會先創建一個execution context
之後再去
等有被呼叫(調用)時才進到Execution Stack裏頭
每次執行都只會執行最上層的Execution Context
(每次洗盤會先洗最上面的 , 洗完就拿走)
以上是本次的一些分享!!!
恩 這邊可能會覺得
有講到一些運行於背後端的東西和名詞實在不好理解
有沒有辦法可以一步一步去執行看看或是確切看到這些名詞對應內部內容??
這邊介紹一個方法(用 Google Chrome ==> F12 進到開發人員模式)
之後我們在前幾篇都是在console去打印觀察值的變化
現在我們要改到Sources頁簽下 ==> Ctrl+P 開啟對應js檔案
藍色就是插入中斷點後的顯示畫面!!!!
這邊示範一次案例1以及案例2.
實際觀察過程
留言
張貼留言