回到课程

链式(调用)

重要程度: 2

有一个可以上下移动的 ladder 对象:

let ladder = {
  step: 0,
  up() {
    this.step++;
  },
  down() {
    this.step--;
  },
  showStep: function() { // 显示当前的 step
    alert( this.step );
  }
};

现在,如果我们要按顺序执行几次调用,可以这样做:

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

修改 updownshowStep 的代码,让调用可以链接,就像这样:

ladder.up().up().down().showStep().down().showStep(); // 展示 1,然后 0

这种方法在 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().showStep().down().showStep(); // 展示 1,然后 0

我们也可以每行一个调用。对于长链接它更具可读性:

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

使用沙箱的测试功能打开解决方案。