JavaScript 變數與函式宣告前置

JavaScript是自上而下按照一定的規則執行的。

首先看一段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let a=1,b=2;
let num;
num=a+b;
console.log(num);

程式碼執行效果截圖如下：

非常簡單的一段程式碼，程式碼由上而下很順利的執行完畢。

再來看一段程式碼例項：

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

程式碼執行效果截圖如下：

上面程式碼也可以順暢的執行。

在文章的開頭提到過，JavaScript程式碼是從上到下執行的，函式宣告在下，函式呼叫在上。

為什麼還可以正常呼叫函式，並列印出"螞蟻部落"字串，這就涉及到宣告前置概念。

宣告前置包括變數宣告前置和函式宣告前置，分別做一下分析。

一.變數宣告前置：

首先看一段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
console.log(webName);

程式碼執行效果截圖如下：

程式碼執行報錯了，因為變數webName並未宣告。

對一個未宣告的變數求值會報錯。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
console.log(webName);
var webName="螞蟻部落";
console.log(webName);

程式碼執行效果截圖如下：

第一行程式碼下方宣告變數webName，這時第一行程式碼不會報錯，並列印出undefined。

第三行程式碼則可以列印出字串"螞蟻部落"，下面分析一下原理。

我們總說程式碼執行，其實在JavaScript中，程式碼的"執行"僅是JavaScript程式碼執行的一部分，在程式碼執行之前，程式碼還需要進行"詞法分析"。在詞法分析階段，變數會被宣告被前置，並賦初值為undefined，詞法分析結束之後，再去執行程式碼，在程式碼執行階段，變數被賦值為使用者規定的值。所以上面的程式碼可以大致等同如下：

[JavaScript] 純文字檢視 複製程式碼
// 詞法分析階段，變數宣告被前置並賦初值為undefined。
var webName=undefined
// 執行階段，變數預設值為undefined。
console.log(webName);
// 執行階段，變數賦值為字串螞蟻部落
webName="螞蟻部落";
// 執行階段，列印出字串螞蟻部落
console.log(webName);

已經進行註釋說明，不再多做介紹。

二.函式宣告前置：

函式宣告也會前置，前面的程式碼已經進行了演示。

程式碼如下：

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

和變數宣告前置基本一樣，在詞法分析階段，變數被前置宣告，所以上述程式碼可以正常執行。

三.特別說明：

被前置宣告的變數或者函式都被侷限於當前作用域。

程式碼例項如下：

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

變數webName宣告前置侷限於函式作用域，通俗的將它被前置於函式作用域的頂端。

更多相關內容可以參閱JavaScript 詞法分析簡介一章節。