avatar

在實作程式的時候,突然意識到Decorator不就是HOF嗎?因此這篇文章就誕生了

介紹

High Order Function

High Order Function是一種將Function做為參數或是return function的一種設計。

Decorator

Decorator是一種High Order Function,但是High Order Function並不是Decorator的一種。
這是一種很好用的設計樣式,如果你只需要添加部分的功能,而這個功能又很常被使用到,那麼你可以嘗試使用Decorator。

為什麼需要Decorator

Decorator的某些概念有點像繼承,但是竟量少用繼承才能讓程式碼撰寫上比較彈性。
怎麼說呢?讓我們來看看以下範例。

假設今天我要設計一個實況主叫改革家:

1
2
3
4
5
6
7
8
9
class Revolutionary {
constructor(mood) {
this.mood=mood;
}

playGame() {
console.log('我每一場都要認真打');
}
}

改革家可能會切換很多種模式:

  1. 瘋狂送頭
  2. 叔叔開剁
  3. 中風模式

那這樣…是不是就要寫很多種來繼承改革家:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class RevolutionaryGuaBrother extends Revolutionary {
playGame() {
console.log('幸福好運到, 人頭送夠夠');
}
}

class RevolutionaryUncle extends Revolutionary {
playGame() {
console.log('AAAAAAAAAAAAAAAA');
}
}

class RevolutionaryCrazy extends Revolutionary {
playGame() {
console.log('哦齁齁齁');
}
}

哇…只是要添加一部份的功能就要寫這麼多我要加幾種就要寫幾個
那我如果要,不就要再寫更多了嗎?有幾種組合排列的改革家
創造那麼多改革家豈不是人格分裂了嗎?
讓我們設計看看Function Decorator

Function Decorator

今天我們一樣設計一個Revolutionary,一開始初始化的有mode與playGame。

1
2
3
4
5
6
const Revolutionary = {
mode: 'normal',
playGame: function() {
console.log('我每一場都要認真打');
}
};
1
2
3
4
5
6
7
8
const checkCrazy = (fn) => {
return (...params) => {
if(params.mode === 'crazy') {
throw new Error('哦齁齁齁');
}
return fn(...params);
}
}

舉例

[X] High Order Function
[X] Decorator

1
2
3
const example = (name) => {
console.log('hello ', name);
}

[O] High Order Function
[X] Decorator

1
2
3
4
const compose = (f, g) => {
const wrapper = (a, b) => f(g(a, b));
return wrapper;
}

[O] High Order Function
[O] Decorator

1
2
3
4
5
6
7
const excuteWithLogger = (f) => {
const wrapper = (a, b) => {
f(a, b);
console.log('state: ', a, b);
}
return wrapper;
}

Comment