链式调用实现原理

中心思想是在函数的结尾 return this; .

场景：实现一个可以实现简单的加减乘除的类，可以通过链式调用的方式进行加减乘除，最终返回最后的结果。

基础版

class MyMath {
    constructor(num) {
        this.num = num;
    }

    add(num) {
        this.num += num;
        return this;
    }

    sub(num) {
        this.num -= num;
        return this;
    }

    mul(num) {
        this.num *= num;
        return this;
    }

    div(num) {
        this.num /= num;
        return this;
    }
}

const result = new MyMath(2).add(5).mul(2).sub(7);
console.log(result);   // {num: 7}

在上面的demo中，我们可以通过 return this; 来完成链式调用。

但是上面的demo有一点缺陷，因为最终返回的还不是我们的想要的结果，所以还需要添加一个用于导出最后结果的方法。

加强版

这里我添加了一个 run 方法，用于导出最后的结果。

class MyMath {
    constructor(num) {
        this.num = num;
    }

    add(num) {
        this.num += num;
        return this;
    }

    sub(num) {
        this.num -= num;
        return this;
    }

    mul(num) {
        this.num *= num;
        return this;
    }

    div(num) {
        this.num /= num;
        return this;
    }

    run() {
        return this.num;
    }
}

const result = new MyMath(2).add(5).mul(2).sub(7).run();
console.log(result);  // 7

我是尾巴

在实际业务场景中，链式调用常见于 Promise 。那么想象一下， Promise 的链式调用是如何实现的呢？