如何用JS設計Function Chaining

相信有在開發程式的，不管是前端還是後端都有看過函式串燒這種東西，這次就來認識他吧！

你看過這些東西嗎？

前端也許你看過這個

1
2
3

const score = catList
    .map(cat => cat === isCute)
    .reduce((cuteSum, cuteScore) => cuteSum + cuteScore, 0);

後端也許你會看過這個

1
2
3

String[] nameCard = new String[2];
nameCard[0] = employee.getName().substring(employee.getName().indexOf(" ") + 1);
nameCard[1] = employee.getName().substring(0, employee.getName().indexOf(" "));

你可能會覺得很神奇，到底是怎麼辦到的？其實原理比你想像中的簡單

設計計算機

現在來用簡單的計算機來介紹，一開始我們會設計這樣的功能

var Caculator = function() {
    this.value = 0;
    this.add = function(value) {
        this.value += value;
    }
    this.substract = function(value) {
        this.value -= value;
    }
    this.print = function(value) {
        console.log(this.value);
    }
}

使用的時候可以這樣

const value = new Caculator();
value.add(10);
value.substract(2);
value.print();

但是你可能會覺得好麻煩，每次都要寫一遍來處理資料，因此可以這樣設計：

var Caculator = function() {
    this.value = 0;
    this.add = function(value) {
        this.value += value;
        return this;
    }
    this.substract = function(value) {
        this.value -= value;
        return this;
    }
    this.print = function(value) {
        console.log(this.value);
    }
}