如何封裝一個可被鏈式調用的函式庫？

「鏈式調用」是一種函式庫封裝的設計模式，而對於前端的 JS 使用者們來說，鏈式調用並不陌生，有名的 DOM 操作庫「jQuery」就是這樣使用的，讓我們來試著封裝一個可被鏈式調用的函式庫吧！

本篇短文用一個最簡單的題目來實作可被鏈式調用 — 「加減乘除」函式庫。

Step 1

先定義清楚我們要的函式庫功能：

1. 可被接受一數字參數的接口
2. 具有 4 個方法，分別為加(add)、減(sub)、乘(mul)、除(divide)。
3. 最後可以取得鏈式調用的結果

一個重要的心法 — 每次回傳類是「實體」（或者說實例），讓你可以不斷使用實例上的方法。

Step 2

來聊聊建構式，接受一數字參數。

class ASMD{
  constructor(num){
    this.num = num
  }
}

Step 3

定義其中一個方法並且返回實例

class ASMD{
  constructor(num){
    this.num = num;
  }
  add(param){
   this.num += param
   return this; // <-- 記得我們一定要回傳實例
  }
}

class 中透過 this 操作實例，並且將其回傳。

Step 4

完成剩餘的程式碼

Proof

const asmd10 = new ASMD(10);
let result = asmd10.add(1).sub(2).mul(4).div(2).num;
console.log(result);
// 18

((10+1–2)*4)/2 = 18

小學數學，Great！

一個程式封裝的技巧，尤其在暴露多個類似的方法時，會讓使用者變得相當易用，比起重複操作還要易用。

const instance = new Something(10)
instance.add(1);
instance.sub(2);
instance.mul(4);
instance.div(2);
console.log(instance.num)

最後放上縮圖的數學嘻哈歌