問題一覧に戻る
中級functions
問題70: メソッドチェーン

メソッドチェーンの実装方法を学びましょう。メソッドチェーンは、複数のメソッドを連続して呼び出すことで、流れるようなインターフェースを提供するデザインパターンです。各メソッドがthisを返すことで、同じオブジェクトに対して次のメソッドを呼び出すことができます。jQueryやLodashなどのライブラリでも幅広く使われているパターンです。

// メソッドチェーン
// 計算機
class Calculator {
  constructor() {
    this.value = 0;
  }
  
  add(n) {
    this.value += n;
    return ;
  }
  
  multiply(n) {
    this.value *= n;
     this;
  }
  
  getValue() {
    return this.value;
  }
}

// チェーンメソッド
const calc1 = new Calculator();
const result1 = calc1.add(5).multiply(2).add(4).getValue();
console.log("結果1: " + result1);

const calc2 = new Calculator();
const result2 = calc2.add(3)multiply(5).getValue();
console.log("結果2: " + result2);