JavaScript執行機制淺析
從一個簡單的問題談起:
<script type="text/javascript"> alert(i); var i = 1; </script>
輸出結果是undefined, 這種現象被稱成“預解析”:JavaScript引擎會優先解析var變數和function定義。在預解析完成後,才會執行程式碼。如果一個文件流中包含多個script程式碼段(用script標籤分隔的js程式碼或引入的js檔案).
執行順序是:
step1. 讀入第一個程式碼段
step2. 做語法分析,有錯則報語法錯誤(比如括號不匹配等),並跳轉到step5
step3. 對var變數和function定義做“預解析”(永遠不會報錯的,因為只解析正確的宣告)
step4. 執行程式碼段,有錯則報錯(比如變數未定義)
step5. 如果還有下一個程式碼段,則讀入下一個程式碼段,重複step2
step6. 結束
上面的分析,已經能解釋很多問題了,但老覺得欠缺點什麼。比如step3裡,“預解析”究竟是怎麼回事?還有step4裡,看下面的例子:
<script type="text/javascript"> alert(i); // error: i is not defined. i = 1; </script>
為什麼第一句會導致錯誤?JavaScript中,變數不是可以不定義嗎?
編譯過程
時間如白馬過隙,書櫃旁翻開恍如隔世般的《編譯原理》,熟悉而又陌生的空白處有著這樣的筆記:
對於傳統編譯型語言來說,編譯步驟分為:詞法分析、語法分析、語義檢查、程式碼優化和位元組生成。
但對於解釋型語言來說,通過詞法分析和語法分析得到語法樹後,就可以開始解釋執行了。
簡單地說,詞法分析是將字元流(char stream)轉換為記號流(token stream), 比如將c = a – b;轉換為:
NAME "c" EQUALS NAME "a" MINUS NAME "b" SEMICOLON
上面只是示例,更進一步的瞭解請檢視 Lexical Analysis.
《JavaScript權威指南》的第2章,講的就是詞法結構(Lexical Structure),ECMA-262 中也有描述。詞法結構是一門語言的基礎,很容易掌握。至於詞法分析的實現那是另一個研究領域,在此不探究。
可以拿自然語言來類比,詞法分析是一對一的硬性翻譯,比如一段英文,逐詞翻譯成中文,得到的是一堆記號流,還很難理解。進一步的翻譯,就需要語法分析了,下圖是一個條件語句的語法樹:
構造語法樹的時候,如果發現無法構造,比如if(a { i = 2; }, 就會報語法錯誤,並結束整個程式碼塊的解析,這就是本文開頭部分的step2.
通過語法分析,構造出語法樹後,翻譯出來的句子可能還會有模糊不清的地方,接下來還需要進一步的語義檢查。對於傳統強型別語言來說,語義檢查的主要部分是型別檢查,比如函式的實參和形參型別是否匹配。對於弱型別語言來說,這一步可能沒有(精力有限,沒時間去看JS的引擎實現,不敢確定JS引擎中是否有語義檢查這一步)。
通過上面的分析可以看出,對於JavaScript引擎來說,肯定有詞法分析和語法分析,之後可能還有語義檢查、程式碼優化等步驟,等這些編譯步驟完成之後(任何語言都有編譯過程,只是解釋型語言沒有編譯成二進位制程式碼),才會開始執行程式碼。
上面的編譯過程,還是無法更深入的解釋文章開頭部分的“預解析”,我們還得仔細探究下JavaScript程式碼的執行過程。
執行過程
周愛民在《JavaScript語言精髓與程式設計實踐》的第二部分,對此有非常仔細的分析。下面是我的一些領悟:
通過編譯,JavaScript程式碼已經翻譯成了語法樹,然後會立刻按照語法樹執行。
進一步的執行過程,需要理解JavaScript的作用域機制,JavaScript採用的是詞法作用域(lexcical scope)。通俗地講,就是JavaScript變數的作用域是在定義時決定而不是執行時決定,也就是說詞法作用域取決於原始碼,編譯器通過靜態分析就能確定,因此詞法作用域也叫做靜態作用域(static scope)。但需要注意,with和eval的語義無法僅通過靜態技術實現,實際上,只能說JS的作用域機制非常接近lexical scope.
JS引擎在執行每個函式例項時,都會建立一個執行環境(execution context)。execution context中包含一個呼叫物件(call object), 呼叫物件是一個scriptObject結構,用來儲存內部變數表varDecls、內嵌函式表funDecls、父級引用列表upvalue等語法分析結構(注意:varDecls和funDecls等資訊是在語法分析階段就已經得到,並儲存在語法樹中。函式例項執行時,會將這些資訊從語法樹複製到 scriptObject上)。scriptObject是與函式相關的一套靜態系統,與函式例項的生命週期保持一致。
lexical scope是JS的作用域機制,還需要理解它的實現方法,這就是作用域鏈(scope chain)。scope chain是一個name lookup機制,首先在當前執行環境的scriptObject中尋找,沒找到,則順著upvalue到父級scriptObject中尋找,一直 lookup到全域性呼叫物件(global object)。
當一個函式例項執行時,會建立或關聯到一個閉包(closure)。 scriptObject用來靜態儲存與函式相關的變數表,closure則在執行期動態儲存這些變數表及其執行值。closure的生命週期有可能比函式例項長。函式例項在活動引用為空後會自動銷燬,closure則要等要資料引用為空後,由JS引擎回收(有些情況下不會自動回收,就導致了記憶體洩漏)。
別被上面的一堆名詞嚇住,一旦理解了執行環境、呼叫物件、閉包、詞法作用域、作用域鏈這些概念,JS語言的很多現象都能迎刃而解。
小結
至此,對於文章開頭部分的疑問,可以解釋得很清楚了:
step3中所謂的“預解析”,其實是在step2的語法分析階段完成,並儲存在語法樹中。當執行到函式例項時,會將varDelcs和funcDecls從語法樹中複製到執行環境的scriptObject上。
step4中,未定義變數意味著在scriptObject的變數表中找不到,JS引擎會沿著scriptObject的upvalue往上尋找,如果都沒找到,對於寫操作i = 1; 最後就會等價為 window.i = 1; 給window物件新增了一個屬性。對於讀操作,如果一直追溯到全域性執行環境的scriptObject上都找不到,就會產生執行期錯誤。
理解後,霧散花開,天空一片晴朗。
最後,留個問題給大家:
<script type="text/javascript"> var arg = 1; function foo(arg) { alert(arg); var arg = 2; } foo(3); </script>
請問alert的輸出是什麼?
相關文章
- js執行機制淺析JS
- 深入淺出JavaScript執行機制JavaScript
- 簡單案例淺析JS執行緒機制JS執行緒
- JavaScript 執行順序淺析JavaScript
- 淺析Java多執行緒程式設計機制Java執行緒程式設計
- 淺析JavaScript的事件迴圈機制JavaScript事件
- JavaScript的事件迴圈機制淺析JavaScript事件
- JavaScript執行機制JavaScript
- Javascript 執行機制JavaScript
- MVVM機制淺析MVVM
- 探索JavaScript執行機制JavaScript
- 淺聊java執行機制Java
- JavaScript執行緒機制與事件機制JavaScript執行緒事件
- JavaScript中的執行機制JavaScript
- javascript執行機制:Event LoopJavaScriptOOP
- 淺談小程式執行機制
- Libco Hook 機制淺析Hook
- PostgreSQL MVCC快照機制淺析SQLMVC
- NX實現機制淺析
- Android Binder機制淺析Android
- 淺析java的反射機制Java反射
- JavaScript的程式碼執行機制JavaScript
- JavaScript執行機制深層剖析JavaScript
- Javascript執行機制(setTimeout/Promise)JavaScriptPromise
- JavaScript執行機制:event-loopJavaScriptOOP
- javascript執行機制之執行順序詳解JavaScript
- 微前端無界機制淺析前端
- 淺析前端頁面渲染機制前端
- java中的反射機制淺析Java反射
- oracle的resetlogs機制淺析Oracle
- Linux 執行緒淺析Linux執行緒
- 淺談promise和js執行機制(一)PromiseJS
- 淺談promise和js執行機制(二)PromiseJS
- JavaScript執行機制-node事件迴圈JavaScript事件
- Javascript中的執行機制——Event LoopJavaScriptOOP
- 傻傻分不清的javascript執行機制JavaScript
- Javascript 執行機制詳解,Event LoopJavaScriptOOP
- JavaScript 執行機制--Event Loop詳解JavaScriptOOP