链式(调用)
重要程度: 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
修改 up
,down
和 showStep
的代码,让调用可以链接,就像这样:
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