javascript執行機制之執行順序詳解
JavaScript是一種描述型指令碼語言,它不同於java或C#等編譯性語言,它不需要進行編譯成中間語言,而是由瀏覽器進行動態地解析與執行。如果你不能理解javaScript語言的執行機制,或者簡單地說,你不能掌握javascript的執行順序,那你就猶如伯樂駕馭不了千里馬,讓千里馬脫韁而出,四處亂竄。
那麼JavaScript是怎麼來進行解析的嗎?它的執行順序又是如何的呢?在瞭解這些之前,我們先來認識幾個重要的術語:
1、程式碼塊
JavaScript中的程式碼塊是指由<script>標籤分割的程式碼段。例如:
<script type="text/javascript"> alert("這是程式碼塊一"); </script> <script type="text/javascript"> alert("這是程式碼塊二"); </script>
JS是按照程式碼塊來進行編譯和執行的,程式碼塊間相互獨立,但變數和方法共享。什麼意思呢? 舉個例子,你就明白了:
<script type="text/javascript"> alert(str);//因為沒有定義str,所以瀏覽器會出錯,下面的不能執行 alert("我是程式碼塊一");//沒有執行到這裡 var test = "我是程式碼塊一變數"; </script> <script type="text/javascript"> alert("我是程式碼塊二"); //這裡有執行到 alert(test); //彈出"我是程式碼塊一變數" </script>
上面的程式碼中程式碼塊一中執行報錯,但不影響程式碼塊二的執行,這就是程式碼塊間的獨立性,而程式碼塊二中能呼叫到程式碼一中的變數,則是塊間共享性。
2、宣告式函式與賦值式函式
JS中的函式定義分為兩種:宣告式函式與賦值式函式。
<script type="text/javascript"> function Fn(){ //宣告式函式 } var Fn = function{ //賦值式函式 } </script>
宣告式函式與賦值式函式的區別在於:在JS的預編譯期,宣告式函式將會先被提取出來,然後才按順序執行js程式碼。
3、預編譯期與執行期
事實上,JS的解析過程分為兩個階段:預編譯期(預處理)與執行期。
預編譯期JS會對本程式碼塊中的所有宣告的變數和函式進行處理(類似與C語言的編譯),但需要注意的是此時處理函式的只是宣告式函式,而且變數也只是進行了宣告但未進行初始化以及賦值。
<script type="text/javascript"> Fn(); //執行結果:"執行了函式2",同名函式後者會覆蓋前者 function Fn(){ //函式1 alert("執行了函式1"); } function Fn(){ //函式2 alert("執行了函式2"); } </script>
<script type="text/javascript"> Fn(); //執行結果:"執行了宣告式函式",在預編譯期宣告函式及被處理了,所以即使Fn()呼叫函式放在宣告函式前也能執行。 function Fn(){ //宣告式函式 alert("執行了宣告式函式"); } var Fn = function(){ //賦值式函式 alert("執行了賦值式函式"); } </script>
//程式碼塊一 <script type="text/javascript"> alert(str);//瀏覽器報錯,但並沒有彈出資訊窗 </script> //程式碼塊二 <script type="text/javascript"> alert(str); //彈窗"undefined" var str = "aaa"; </script> //js在預處理期對變數進行了宣告處理,但是並沒有進行初始化與賦值,所以導致程式碼塊二中的變數是unfiened的,而程式碼一中的變數是完全不存在的,所以瀏覽器報錯。
理解了上面的幾個術語,相信大家對JS的執行機制已經有了個大概的印象了,現在我們來看個例子:
<script type="text/javascript"> Fn(); //瀏覽器報錯:"undefined" </script> <script type="text/javascript"> function Fn(){ //函式1 alert("執行了函式1"); } </script>
為什麼執行上面的程式碼瀏覽器會報錯呢?宣告函式不是會在預處理期就會被處理了嗎,怎麼還會找不到Fn()函式呢?其實這是一個理解誤點,我們上面說了JS引擎是按照程式碼塊來順序執行的,其實完整的說應該是按照程式碼塊來進行預處理和執行的,也就是說預處理的只是執行到的程式碼塊的宣告函式和變數,而對於還未載入的程式碼塊,是沒法進行預處理的,這也是邊編譯邊處理的核心所在。
現在,讓我們來總結整理下:
step 1. 讀入第一個程式碼塊。
step 2. 做語法分析,有錯則報語法錯誤(比如括號不匹配等),並跳轉到step5。
step 3. 對var變數和function定義做“預編譯處理”(永遠不會報錯的,因為只解析正確的宣告)。
step 4. 執行程式碼段,有錯則報錯(比如變數未定義)。
step 5. 如果還有下一個程式碼段,則讀入下一個程式碼段,重複step2。
step6. 結束。
而根據HTML文件流的執行順序,需要在頁面元素渲染前執行的js程式碼應該放在<body>前面的<script>程式碼塊中,而需要在頁面元素載入完後的js放在</body>元素後面,body標籤的onload事件是在最後執行的。
<script type="text/javascript"> alert("first"); function Fn(){ alert("third"); } </script> <body onload="Fn()"> </body> <script type="text/javascript"> alert("second"); </script>
相關文章
- 【轉】javascript執行機制之this詳解JavaScript
- JavaScript執行順序分析JavaScript
- JavaScript的執行順序JavaScript
- Javascript 執行機制詳解,Event LoopJavaScriptOOP
- JavaScript 執行機制--Event Loop詳解JavaScriptOOP
- JavaScript for迴圈 執行順序JavaScript
- JavaScript 執行順序淺析JavaScript
- JavaScript執行機制詳解:再談EvemtJavaScript
- js執行機制詳解JS
- JavaScript 執行機制詳解:再談Event LoopJavaScriptOOP
- JavaScript執行機制JavaScript
- Javascript 執行機制JavaScript
- mySQL 執行語句執行順序MySql
- javascript執行順序簡單介紹JavaScript
- Sql執行順序SQL
- 探索JavaScript執行機制JavaScript
- Js中async/await的執行順序詳解JSAI
- 執行計劃__獲取方法、檢視執行順序、統計資訊詳解
- 執行緒執行順序——CountDownLatch、CyclicBarrier 、join()、執行緒池執行緒CountDownLatch
- 任務執行順序
- for語句執行順序
- laravel Event執行順序Laravel
- Linux c多執行緒執行順序Linux執行緒
- Jmeter之八大可執行元件及執行順序JMeter元件
- JS中的async/await的執行順序詳解JSAI
- JavaScript中的執行機制JavaScript
- javascript執行機制:Event LoopJavaScriptOOP
- JavaScript執行機制淺析JavaScript
- Pytest 順序執行,依賴執行,引數化執行
- 瀏覽器執行緒執行順序,瞭解一下瀏覽器執行緒
- Java之執行緒的優先順序Java執行緒
- [VSIX]build事件初探之執行順序UI事件
- JavaScript執行緒機制與事件機制JavaScript執行緒事件
- 詳解JavaScript的任務、微任務、佇列以及程式碼執行順序JavaScript佇列
- Java中如何保證執行緒順序執行Java執行緒
- 詳解JS執行機制和Event LoopJSOOP
- sql mysql 執行順序 (4)MySql
- SQL語句執行順序SQL