技術標籤：前端javascriptjs前端vue.jscss

變數的宣告提前

• 使用var關鍵字宣告的變數，會在所有的程式碼執行之前被宣告（但是不會賦值，它會在執行到那行程式碼的時候，才會有值），但是如果宣告變數時不使用var關鍵字，則變數不會被宣告提前。可能看起來會有點繞，讓我們來看例子理解一下吧！
  例1：

<script type="text/javascript">
	var a;
	console.log("a = " + a);
	a = 123;
</script>

執行結果：

在這個例子中，我先提前定義了一個變數a，但是我並沒有給a進行賦值，所以輸出的是undefined（a的賦值是在執行程式碼後面，只有當a的賦值在執行程式碼前面，a才會輸出值，否則都是undefined）。如下：

<script type="text/javascript">
	var a = 123;
	console.log("a = " + a);
</script>

執行結果：

例3：

<script type="text/javascript">
	console.log("a = " + a);
	var a = 123;
</script>

執行結果：

在這個例子中，為什麼同樣也是輸出undefined呢？因為變數的宣告提前，我使用的是var關鍵字宣告的變數，不論我var定義在執行的程式碼後面還是前面，他都會提前將我定義的變數進行宣告，但是不會進行賦值。但是我如果沒有使用var關鍵字進行宣告變數呢？讓我們繼續來看一下：

例4：

<script type="text/javascript">
	console.log("a = " + a);
	a = 123;
</script>

執行結果：

我們發現，如果沒有使用var關鍵字進行變數宣告時，會報錯！

函式的宣告提前

• 使用函式宣告形式建立的函式 function 函式(){}，它會在所有的程式碼執行之前就被建立，所以我們可以在函式宣告前來呼叫函式。我們一樣通過例子來理解一下：
  例1：

<script type="text/javascript">
	fun();
	function
 
 fun(){
		console.log("這是我的第一個函式");
	}
	var fun2 = function(){
		console.log("這是我的第二個函式");
	}
</script>

執行結果：

在這個例子中，我們發現，在函式宣告之前我們就先呼叫了fun()函式，這就是函式的宣告提前，所以這種形式的函式位置放在哪裡都是一樣的，都是先被建立。那麼fun2()函式也能如此嗎？

例2：

<script type="text/javascript">
	fun2();
	function fun(){
		console.log("這是我的第一個函式");
	}
	var fun2 = function(){
		console.log("這是我的第二個函式");
	}
</script>

執行結果：

哦吼！報錯了，讓我們先來檢查一下變數fun2

<script type="text/javascript">
	console.log(fun2);
	function fun(){
		console.log("這是我的第一個函式");
	}
	var fun2 = function(){
		console.log("這是我的第二個函式");
	}
</script>

執行結果：

發現沒，因為第二個函式是關鍵字var變數宣告的（變數宣告提前和函式宣告提前是不一樣的噢，不要搞混了），所以有宣告提前，但是沒有賦值，所以輸出undefined。但是undefined不是函式，所以一呼叫就會報錯。

• 總結例2，就是使用函式表示式建立的函式，不會被宣告提前，所以不能在宣告前呼叫。

總的來說就是使用函式宣告function fun(){} 形式的函式會被提前建立，函式表示式var fun2 = function(){} 建立的函式不會被提前建立，一定要在函式後面呼叫。