Js基礎-函數

函數是實現功能的載體， 它應該是一個最小功能的封裝， 比如我們要計算兩個數之和，再比如我們要實現計算正方形的體積等等。

函數定義和調用

函數定義

我們使用 function 關鍵字定義函數

// demo 為函數名， 自己命名但必須符合JS標識符命名規則
// () 小括弧中可以帶參數, 這種參數還有個稱呼 叫做 形式參數 簡稱形參 。 形參可以省略，但小括弧不能省
// {} 大括弧內部的函數就是邏輯運算部分， 如果我們要計算 傳入的 a、b 的和，就可以在這裡寫
function demo(a, b){
   // 函數的主題內容
}

函數調用

我們希望在哪裡執行定義的函數， 就在哪裡進行調用。

// 函數調用，寫清楚函數名稱，已經調用的參數
demo(2, 3);

從函數定義中，我們可以看出函數總共由三部分構成， 輸入、輸出和計算

輸入告訴我們外部的一些變數值，然後通過計算把結果輸出

輸入

輸入傳的值，我們也叫形參，即形式參數，意思是我們還不知道具體傳什麼值，先拿一個變數占上坑。如函數定義中的 a， b 兩個參數

當我們具體調用的時候才會確定要傳什麼值， 這時候的參數叫做實參（實際參數）

// 傳入 2， 3 在函數運算的時候會替換掉 形參， 所以我們叫他們實參
demo(2, 3);

形參 和 實參 有時候數量並不相等，不等情況有兩種

1. 形參比實參多

<script>
  function print(a, b , c) {
		console.log("a=", a,",b=",b,",c=",c);
	}

// 形式參數 定義了三個 a， b ，c 但此時之傳入了兩個， 則 1賦值給 a ， 2賦值給b ， c 只能為 undefined了
print(1, 2)
</script>

1. 實參比形參多

<script>
  function print(a, b , c) {
		console.log("a=", a,",b=",b,",c=",c);
	}

// 形式參數 定義了三個 a， b ，c , 但是我們沒有形參接受4 這個實際傳入的參數，這個參數在這個運算中只能被拋棄
print(1, 2, 3,4)
</script>

實際需求中我們應該能準確的使用函數，使得形參和實參一一對應

但有時候，又有一些場景，我們想在被調用的函數中能夠獲取到所有傳入的實際參數。比如：求傳入的所有實參的和。

這種場景，需要 arguments， arguments 能夠像數組那樣遍歷，獲得所有實參

<script>
    function plus() {
        var resultPlus = 0;
        for(var i = 0 ; i < arguments.length ; i++) {
            resultPlus += arguments[i];
        }
        return resultPlus;
    }

    var result = plus(1,2,3,4,5)
    console.log(result);

</script>

輸出

從函數定義的例子當中，我們並沒有看到輸出，即函數並沒有返回任何結果

這是因為在一個函數中，可以沒有輸入、也可以沒有輸出、甚至也可以把函數計算也拿掉（空函數， 當然這種函數沒有任何現實意義）

如果我們函數運算完成後需要返回值怎麼辦？

好辦，用 return 關鍵字, 舉個慄子，我們想計算 兩個數的和，並返回計算結果， 代碼如下

<script>
        function plus(a, b){
            return a + b;
        }
</script>

如果代碼能執行到return語句就意味著函數運行結束了， 它會把代碼的執行權先歸還給調用者

匿名函數

以上的例子中，函數都有名字；我們改造下， 就會得到匿名函數，匿名函數就是沒有名字的函數

function(a,b) {
	// 函數主體內容
}

如果我們把上面的函數運行在瀏覽器，肯定會報錯， 因為任何函數定義出來都是要調用執行的，上面定義的函數報錯就是因為瀏覽器不知道如何運行引起的

所以這麼寫是不完整的， 根據需要，我們可以用以下的思路定義匿名函數

將匿名函數賦值給變數

var fun = function(a, b) {
	// 
}

這樣，我們的函數居然又擁有了一個“名字”

當然函數的調用的寫法不變

fun(a,b);

用小括弧包裹

<script>
        (function (a,b ){
            console.log('hello', a,b)
        })
</script>

這種方式只是定義，我們無法在其他地方調用它，同樣也無法執行， 這貌似打破了我們上面說的：一個函數定義出來就是要調用執行的說法

所以為了把這句話圓回去，我們必須加點東西，我們再加一個小括弧，把它變成立即執行函數；也就是說我們在函數定義的地方調用它，當瀏覽器解析到此代碼的時候立即執行。

<script>
      (function (a,b ){
          console.log('hello', a,b)
      })();
</script>

立即執行函數，既保證了在定義的地方可以調用，也保證的 任何函數都需要調用執行的說法

回調函數

函數還可以作為一個參數值傳給其它函數， 其它參數執行到具體代碼會自動調用。

我們上一篇

數組

紫薯自書，公眾號：優雅編程JS基礎-複雜數據類型之數組

提到的排序的例子，就是把一個函數當作形參傳入到了另外函數中

var sortArray = array.sort(function(a, b){
      return b-a;
});

把函數當成一個返回值

函數還可以當成返回值返回給調用方

<script>
      function plus(a, b){

					
          return function() {
              return a + b;
          } 
      }

      var plusResult = plus(1,2);

      var plusResultFunResult = plusResult();
      console.log(plusResult);
      console.log(plusResultFunResult);
</script>

上面這個例子， plus 函數返回了一個函數給調用方

plusResult 指向的是一個函數

plusResultFunResult 指向的才是最終的運算結果

如果我們只想得到結果，省略啰嗦的函數賦值給引用變數的過程，我們也可以像下麵一樣這麼做

<script>
        function plus(a, b){
            return function() {
                return a + b;
            } 
        }
        var plusResultFunResult = plus(1,2)();
        console.log(plusResultFunResult);
    </script>

函數的執行順序

一個函數執行的順序，是從調用開始， 逐行開始執行，直到遇見return或者函數最後一行結束。最終函數執行結束後會把調用權交還給函數。

微信公眾號