1. 函式的概念

在 JS 裡面，可能會定義非常多的相同程式碼或者功能相似的程式碼，這些程式碼可能需要大量重複使用。雖然 for迴圈語句也能實現一些簡單的重複操作，但是比較具有侷限性，此時我們就可以使用 JS 中的函式。

函式：就是封裝了一段可被重複呼叫執行的程式碼塊。通過此程式碼塊可以實現大量程式碼的重複使用。

2. 函式的使用

宣告函式

// 宣告函式
function 函式名() {
  //函式體程式碼
}

• function 是宣告函式的關鍵字,必須小寫

• 由於函式一般是為了實現某個功能才定義的， 所以通常我們將函式名命名為動詞，比如 getSum

呼叫函式

// 呼叫函式
函式名(); // 通過呼叫函式名來執行函式體程式碼
 

• 呼叫的時候千萬不要忘記新增小括號

• 口訣：函式不呼叫，自己不執行

  注意：宣告函式本身並不會執行程式碼，只有呼叫函式時才會執行函式體程式碼。

函式的封裝

• 函式的封裝是把一個或者多個功能通過函式的方式封裝起來，對外只提供一個簡單的函式介面

• 簡單理解：封裝類似於將電腦配件整合組裝到機箱中 ( 類似快遞打包）

  例子：封裝計算1-100累加和

  ​
  /* 
    計算1-100之間值的函式
  */
  // 宣告函式
  function getSum(){
   var sumNum = 0;// 準備一個變數，儲存數字和
   for (var i = 1; i <= 100; i++) {
    sumNum += i;// 把每個數值 都累加 到變數中
   
    }
   alert(sumNum);
  }
  // 呼叫函式
  getSum();

2.3 函式的引數

函式引數語法

• 形參：函式定義時設定接收呼叫時傳入

• 實參：函式呼叫時傳入小括號內的真實資料

  引數的作用 : 在函式內部某些值不能固定，我們可以通過引數在呼叫函式時傳遞不同的值進去。

  函式引數的運用：

  // 帶引數的函式宣告
  function 函式名(形參1, 形參2 , 形參3...) { // 可以定義任意多的引數，用逗號分隔
   // 函式體
  }
  // 帶引數的函式呼叫
  函式名(實參1, 實參2, 實參3...); 

  1. 呼叫的時候實參值是傳遞給形參的

  2. 形參簡單理解為：不用宣告的變數

  3. 實參和形參的多個引數之間用逗號（,）分隔

函式形參和實引數量不匹配時

注意：在JavaScript中，形參的預設值是undefined。

小結：

• 函式可以帶引數也可以不帶引數

• 宣告函式的時候，函式名括號裡面的是形參，形參的預設值為 undefined

• 呼叫函式的時候，函式名括號裡面的是實參

• 多個引數中間用逗號分隔

• 形參的個數可以和實參個數不匹配，但是結果不可預計，我們儘量要匹配

2.4 函式的返回值

return 語句

返回值：函式呼叫整體代表的資料；函式執行完成後可以通過return語句將指定資料返回 。

// 宣告函式
function 函式名（）{
  ...
  return 需要返回的值；
}
// 呼叫函式
函式名();  // 此時呼叫函式就可以得到函式體內return 後面的值

• 在使用 return 語句時，函式會停止執行，並返回指定的值

• 如果函式沒有 return ，返回的值是 undefined

break ,continue ,return 的區別

• break ：結束當前的迴圈體（如 for、while）

• continue ：跳出本次迴圈，繼續執行下次迴圈（如 for、while）

• return ：不僅可以退出迴圈，還能夠返回 return 語句中的值，同時還可以結束當前的函式體內的程式碼

2.5 arguments的使用

當不確定有多少個引數傳遞的時候，可以用 arguments 來獲取。JavaScript 中，arguments實際上它是當前函式的一個內建物件。所有函式都內建了一個 arguments 物件，arguments 物件中儲存了傳遞的所有實參。arguments展示形式是一個偽陣列，因此可以進行遍歷。偽陣列具有以下特點：

• 具有 length 屬性

• 按索引方式儲存資料

• 不具有陣列的 push , pop 等方法

  注意：在函式內部使用該物件，用此物件獲取函式呼叫時傳的實參。

2.6 函式案例

    函式內部可以呼叫另一個函式，在同一作用域程式碼中，函式名即代表封裝的操作，使用函式名加括號即可以將封裝的操作執行。

2.7 函式的兩種宣告方式

• 自定義函式方式(命名函式)

  利用函式關鍵字 function 自定義函式方式

  // 宣告定義方式
  function fn() {...}
  // 呼叫 
  fn(); 

  • 因為有名字，所以也被稱為命名函式

  • 呼叫函式的程式碼既可以放到宣告函式的前面，也可以放在宣告函式的後面

• 函式表示式方式(匿名函式）

  利用函式表示式方式的寫法如下：

  // 這是函式表示式寫法，匿名函式後面跟分號結束
  var fn = function(){...}；
  // 呼叫的方式，函式呼叫必須寫到函式體下面
  fn();

  • 因為函式沒有名字，所以也被稱為匿名函式

  • 這個fn 裡面儲存的是一個函式

  • 函式表示式方式原理跟宣告變數方式是一致的

  • 函式呼叫的程式碼必須寫到函式體後面