链式调用 - JavaScript 中文教程

有一个 ladder 对象，它允许上下移动

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

现在，如果我们需要按顺序进行多次调用，可以像这样操作

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

修改up、down和showStep的代码，使其调用可以链式调用，例如：

ladder.up().up().down().showStep().down().showStep(); // shows 1 then 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(); // shows 1 then 0

我们也可以每行写一个调用。对于长链来说，这样更易读。

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

在沙盒中打开带有测试的解决方案。