javascript執行順序簡單介紹

很多初學者可能會認為此問題沒有必要介紹，因為js就是順序執行的，也就是從上到下一通執行下來就完畢了，其實如果細究下來，中間還是有許多需要特別注意的地方，否則可能會出現意想不到的問題，下面就介紹一下相關內容。

一.什麼是程式碼塊:

其實什麼是程式碼塊，大家都不陌生，但是一扯上術語，可能一扯上術語就會難倒不少人。

所謂的程式碼塊其實就是由<script></script>標籤包裹的內容。

[HTML] 純文字檢視 複製程式碼
<script type="text/javascript">
var str="antzone";
console.log(str);
</script>

上面就一個簡單的程式碼塊。程式碼塊和程式碼之間雖然是獨立的，但是變數和函式是共享的，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<script type="text/javascript">
var str="antzone";
alert(y);
</script>
<script type="text/javascript">
alert(str);
</script>

上面是兩個獨立的程式碼塊，同時編譯和執行是以程式碼塊為單位的，所以第一個程式碼塊中雖然會出現，導致程式無法執行，但是並不會影響第二個程式碼塊的編譯和執行，同時第二個程式碼塊中使用的是第一個程式碼塊中宣告的變數，這說明程式碼塊之間既互相獨立，而又存在共享性。

二.預編譯和執行期:

其實javascript程式碼的解析分為兩個階段，一個是預編譯階段，一個是執行期。

在預編譯階段，會將變數宣告和函式宣告前置，但是需要特別注意的是，變數只會宣告不會被賦值。

[JavaScript] 純文字檢視 複製程式碼
func();
function func(){
  console.log("螞蟻部落");
}
function func(){
  console.log("分享互助");
}

在上面的程式碼中，雖然函式的呼叫在函式宣告之前，但是依然有效，這說明在預編譯期間函式的宣告是前置的，同時需要注意的是，後面宣告的函式會覆蓋前面宣告的同名函式，再來看一段關於變數的程式碼:

[JavaScript] 純文字檢視 複製程式碼
console.log(str);
var str="antzone";

以上程式碼的輸出結果是undefined，這說明變數宣告雖然前置了，但是並沒有被賦值，再來看一段程式碼:

[JavaScript] 純文字檢視 複製程式碼
func();
var func=function(){
console.log("螞蟻部落");
}

以上程式碼會報錯，上面其實就是一個變數宣告，只是變數的值是函式物件而已，呼叫函式的時候變數值只是undefined。

三.最後總結:

在總結之前再來看一段程式碼:

[HTML] 純文字檢視 複製程式碼
<script type="text/javascript">
func();  
</script>
<script type="text/javascript">
function func(){
  alert("螞蟻部落");
}
</script>

上面的程式碼會報錯，很多朋友會有這樣的疑問，不是函式宣告會前置嗎，確實如此，但是js的預編譯和執行是以程式碼塊為單位的，在預編譯和執行第一個程式碼塊的時候，沒有函式的宣告所以會報錯。