レッスンに戻る

チェーン

重要性: 2

上下に移動できる ladder オブジェクトがあります。:

let ladder = {
  step: 0,
  up() {
    this.step++;
  },
  down() {
    this.step--;
  },
  showStep: function() { // 現在の段を表示します
    alert( this.step );
  }
};

さて、順番にいくつかの呼び出しをする場合、このようにできます:

ladder.up();
ladder.up();
ladder.down();
ladder.showStep(); // 1

updown のコードを修正して、連鎖可能な呼び出しができるようにしてください。:

ladder.up().up().down().showStep(); // 1

このようなアプローチはJavaScriptライブラリの中で広く使われています。

テストと一緒にサンドボックスを開く

解決策はすべての呼び出しでオブジェクト自身を返すことです。

let ladder = {
  step: 0,
  up() {
    this.step++;
    return this;
  },
  down() {
    this.step--;
    return this;
  },
  showStep() {
    alert( this.step );
    return this;
  }
}

ladder.up().up().down().up().down().showStep(); // 1

また、1行毎に1つの呼び出しで書くこともできます。長い連鎖の場合はより読みやすいです。:

ladder
  .up()
  .up()
  .down()
  .up()
  .down()
  .showStep(); // 1
let ladder = {
  step: 0,
  up: function() {
    this.step++;
    return this;
  },
  down: function() {
    this.step--;
    return this;
  },
  showStep: function() {
    alert(this.step);
  }
};

サンドボックスでテストと一緒に解答を開く