JavaScript function 函式

函式是JavaScript中應用最為廣泛的資料結構。

首先看一段程式碼例項感受一下它的功能：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function func(webName,age){
  let str=webName+"已經"+age+"歲了";
  console.log(str);
} 
func("螞蟻部落",5);
func("百度",18);

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

上面程式碼建立一個函式，呼叫兩次並傳遞不同的引數。

由此我們可以對函式做一個總結：

（1）.函式構成需要符合一定的語法規範。

（2）.能夠接受引數。

（3）.可以重複利用。

（4）.函式可以返回一個值，上面程式碼並沒有演示。

一.建立函式：

函式結構需要符合一定的語法規範，當前建立函式有三種方式：

（1）.函式宣告方式。

（2）.函式表示式方式。

（3）.利用Function建構函式。

下面分別做一下詳細介紹：

函式宣告方式：

此方式建立函式必須要遵循如下嚴格的語法規則：

[JavaScript] 純文字檢視 複製程式碼
function 函式名稱 (引數：可選){ 函式體 }

特別說明：函式宣告方式建立函式，函式名稱是必須的，表示式方式則是可選的。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼
function func(webName,age){
  // code 
}

結構分析如下：

（1）.func是函式名稱。

（2）.函式名稱後面是一個小括號，小括號是必須的。

（3）.小括號中的webName與age是引數，引數是可選的。

（4）.大括號中內容是函式體部分，是具體的功能實現，可以為空，但是大括號不能省略。

表示式方式宣告：

語法規則如下：

[JavaScript] 純文字檢視 複製程式碼
function 函式名稱（可選）(引數：可選){ 函式體 }

表示式方式宣告的函式，名稱是可選的，這一點與函式宣告方式不同。

程式碼例項如下：

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

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

上述程式碼就是一個賦值表示式，右側函式帶有名字，最常見的是沒有名字的形式：

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

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

所謂表示式方式宣告，本質就是讓函式處於表示式環境中，作為一個運算元存在。

理解了本質，就可以對其進行靈活應用，最常見的是對匿名函式的使用。

具體參閱JavaScript 匿名函式一章節。

ES2015新增箭頭函式，全部是匿名函式，也就是通過表示式方式宣告。

關於箭頭函式具體參閱JavaScript 箭頭函式一章節。

Function建構函式方式：

function函式自身也是一個物件例項，它可以由Function建構函式建立。

具體可以參閱JavaScript Function一章節。

二.函式的呼叫與返回值：

函式名稱+()可以呼叫指定函式，通過小括號可以傳遞引數。

對於任何方式宣告的函式都適用，程式碼例項如下：

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

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

通過語句可以返回一個值，如果沒有return語句，相當於返回undefined。

三.函式宣告提升：

函式宣告具有提升效果，具體參閱JavaScript 變數與函式宣告前置一章節。

我們說建立函式有三種方式，而不能說宣告函式有三種方式。

宣告函式就是本文介紹的第一種建立函式的方式。