【javascript】メソッドチェーン

チェーンメソッド

異なるメソッドを連続して実行することができる。

case

• Personクラスにhello,introduce,shakeHands,byeというメソッドがある。

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    hello(person) {
        console.log(`${this.name} says hello ${person.name}`);
    }

    introduce() {
        console.log(`Hi, I'm ${this.name}, ${this.age} years old.`);
    }

    shakeHands(person) {
        console.log(`${this.name} shake hands with ${person.name}.`);
    }

    bye(person) {
        console.log(`Goodbye, ${person.name}.`);
    }
}

const bob = new Person('Bob', 23);
const tim = new Person('Tim', 33);

bob.hello(tim);
bob.introduce();
bob.shakeHands(tim);
bob.bye(tim);

• 実行するとそれぞれ以下の要素がコンソールに出力される。
  • Bob says hello Tim
  • Hi, I'm Bob, 23 years old.
  • Bob shake hands with Tim.
  • Goodbye, Tim
• 問題は、実行する時にそれぞれ、のメソッドを以下のように実行することになる。

bob.hello(tim);
bob.introduce();
bob.shakeHands(tim);
bob.bye(tim);

• これを以下のように連続して実行するにはどうするか？

bob.hello(tim)
   .introduce()
   .shakeHands(tim)
   .bye(tim)

結論

各メソッドの戻り値にthisを追加してPersonオブジェクトを返してあげる

hello(person) {
        console.log(`${this.name} says hello ${person.name}`);
        return this;
    }

なぜか?
* 最初のhallo()を実行した時にhalloにはPersonのオブジェクトが渡っていないため、連続して、メソッドを追加できない。

• そこで、Personオブジェクトの各メソッドの戻り値にthisを渡すことで実行後もPersonオブジェクトを維持することができる。

  • thisにはpersonオブジェクトが存在しprototypeにはメソッドが格納されていることが確認できる。
  • 

• 最終的のコード

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    hello(person) {
        console.log(`${this.name} says hello ${person.name}`);
        return this;
    }

    introduce() {
        console.log(`Hi, I'm ${this.name}, ${this.age} years old.`);
        return this;
    }

    shakeHands(person) {
        console.log(`${this.name} shake hands with ${person.name}.`);
        console.log(this)
        return this;
    }

    bye(person) {
        console.log(`Goodbye, ${person.name}.`);

    }
}

const bob = new Person('Bob', 23);
const tim = new Person('Tim', 33);

bob.hello(tim)
    .introduce()
    .shakeHands(tim)
    .bye(tim);