两种构造函数方法调用方式的差异及链式调用需返回this的原因

需求目标 #

要实现支持链式调用的数学运算类，最终达到以下效果：

let num = new Mathematics(5).add(5).sub(8).add(8).getVal();
console.log(num) // 输出 10

初始实现代码 #

function Mathematics(val) {
    this.value = val;
    this.add = (val)=>{
        this.value += val;
    };
    this.sub = (val)=>{
        this.value -= val;
    }
    this.getVal = ()=>{
        return this.value;
    }
}

调用表现差异 #

• 链式调用时报错：

let num = new Mathematics(5).add(5).sub(8).add(8).getVal();

• 拆分调用时运行正常：

const num = new Mathematics(5);
num.add(5);
num.sub(8);
num.add(8);
console.log(num.getVal()); // 输出 10

问题解析 #

为什么必须返回this？ #

链式调用的本质是让每一次方法调用都返回当前对象的引用，这样后续的方法才能继续在同一个实例上执行。

你写的初始代码里，add()和sub()方法执行完后没有返回任何值，默认会返回undefined。当你用链式调用时，new Mathematics(5).add(5)的结果是undefined，接着调用.sub(8)就等同于在undefined上调用方法，这必然会抛出错误。

两种调用方式的核心差异 #

• 拆分调用：你全程持有Mathematics实例的引用（变量num），每次调用方法都是直接在这个实例上操作，不需要方法返回对象引用，因为你明确知道要操作哪个对象。
• 链式调用：每一步调用的结果就是下一个方法的调用主体。如果前一个方法不返回当前实例，后续方法就找不到可操作的对象，自然会报错。

修正后的代码 #

function Mathematics(val) {
    this.value = val;
    this.add = (val)=>{
        this.value += val;
        return this;
    };
    this.sub = (val)=>{
        this.value -= val;
        return this;
    }
    this.getVal = ()=>{
        return this.value;
    }
}

内容的提问来源于stack exchange，提问作者Sandeep Garg