KuoMin's Blog
0%

JavaScript Chap.7 ：高階函式、回乎函式、閉包

Posted on Edited on
在這篇文章會學到 * 一般函式、高階函式 * 回乎函式是什麼 * 閉包是什麼

JavaScript Chap.7 ：高階函式、回乎函式、閉包

在這篇文章會學到

  • 一般函式、高階函式
  • 回乎函式是什麼
  • 閉包是什麼

在上一篇有提到函式有分表達式和陳述式，而大部分我們會使用到的是會回傳數值的表達式
我們就在進一步說明函式的功效:

基本上函式有以下特點:

  • 函式可以執行: 可以進行陳述式計算
  • 函式回傳: 可以用表達式回傳
  • 立即函式: 他也可同時具備上述兩者特點
  • 重複調用性: 可重複呼叫
  • 帶入不同參數: 可傳入不同參數得出不同結果

一般會用小寫命名來代表函式

一般函式、高階函式

一般函式又稱一級函式(First-Class Function)，通常是來說明這語言的特性，
能將函式當成物件、數值來看待，也代表說我們可以把一個函式當成參考傳入另一函式
以下為範例code:

1
2
3
function SayHello(fn,data){
    return fn(data)
}

所以這也就是JavaScript 適合用於Fuctional Progamming的原因。

高階函式(High Order Function) 為 具有函數參數的函數。
這是什麼意思?
也就是能接收函式作參數，又或者可回傳函式等功能
例如：我們很常使用的 map, filter, reduce都是高階函式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
以下為map常用方式，來拆解使用邏輯
let ary =[1, 2, 3];
ary.map(item=> item*2)

可拆解成
let newAry = ary.map(
    function(item){
        return item *2 
    }
)

也可以拆更細

function aryMap (fn, ary){
    let newAry =[];
    for (let i=o; i< ary.length; i++){
        let ans = fn(ary[i]);
        newAry.push(ans)
    }
    return newAry
}

回呼函式是什麼

回呼函式(callback function )是基於JavaScript有著高階函式特性
能將外層函式以參數形式代入，後再依照排列順序執行，
講白話點就是－把函式當作另一個函式的參數，透過另一個函式來呼叫它
範例code如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
const firstfn = function() {
      console.log('1,我應該後執行');
    }
const secondfn = function(firstfn ) {
      console.log('2,我要先執行');
      firstfn();
    }
secondfn(firstfn)

// 出來結果為
// "2,我要先執行"
// "1,我應該後執行'"
// 這就是利用callback特性，讓函式可以調用函式並起依照自己需要執行

閉包是什麼

閉包 closure 則是基於在回呼函式(callback function )所誕生的
其主要觀念就是能從內部函式訪問外部函式的作用域
做到以下特點：

  • 個別函式變數獨立
  • 隱藏商業邏輯變數

範例code如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function sellBread(str) {
      const breadPrice = 100;
      let count = 0;
      const name = str;
      return function (c) {
        count += c;
        console.log(`${name}今天賣出了 ${count} 麵包，總共賺了 ${breadPrice * count} 元`);
      }
    }
    const todayTotal = sellBread('小明');
    todayTotal(1);
    todayTotal(10);
    todayTotal(10);

    const huaTotal = sellBread('小華')
    huaTotal (1)
    huaTotal (2)

// 出來結果為
// "小明今天賣出了 1 麵包，總共賺了 100 元"
// "小明今天賣出了 11 麵包，總共賺了 1100 元"
// "小明今天賣出了 21 麵包，總共賺了 2100 元"
// "小華今天賣出了 1 麵包，總共賺了 100 元"
// "小華今天賣出了 3 麵包，總共賺了 300 元"

從上面範例，我們可理解到

  1. 閉包能在sellBread內放入breadPrice價格，而外部函式調用卻無法取得
  2. 運用閉包能讓內部函式調用外部函式作用域數值
  3. 閉能設立不同變數指向同一個函式(sellBread)，其回傳結果也是獨立區分

以上就是本篇內容，希望大家看完後能對函式更加理解。

參考資料: