討論Decorator Function與High Order Function

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

介紹

High Order Function

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

Decorator

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

為什麼需要Decorator

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

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

class Revolutionary {
    constructor(mood) {
        this.mood=mood;
    }
    
    playGame() {
        console.log('我每一場都要認真打');
    }
}

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

瘋狂送頭
叔叔開剁
中風模式
…

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

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。

const Revolutionary = {
    mode: 'normal',
    playGame: function() {
        console.log('我每一場都要認真打');
    }
};

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

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

[O] High Order Function
[O] Decorator

const excuteWithLogger = (f) => {
    const wrapper = (a, b) => {
        f(a, b);
        console.log('state: ', a, b);
    }
    return wrapper;
}

Comment