JS实现计算器链式调用时报calc.init(...).add不是函数如何修复

报错原因 #

你的代码报错的核心是链式调用要求每个方法返回当前实例对象，但你现有init()、add()等方法返回的是计算后的数字值，自然无法在数字上调用add等实例方法。

修复后完整代码 #

const calc = new Calculator();
console.log(
  calc
  .init(2)
  .add(2)
  .mul(3)
  .div(4)
  .sub(2).result // 输出1，符合预期
);

calc.alert(); // 5秒后弹出计算结果1

function Calculator() {
  // 把result挂载到实例上，方便外部访问
  this.result = 0;

  this.alert = function() {
    setTimeout(() => alert(this.result), 5000);
  };

  this.init = function(i) {
    this.result = i;
    // 返回当前实例，支持链式调用
    return this;
  };

  this.add = function(i) {
    this.result += i;
    return this;
  };

  this.mul = function(i) {
    this.result = this.result * i;
    return this;
  };

  this.div = function(i) {
    this.result = this.result / i;
    return this;
  };

  this.sub = function(i) {
    this.result = this.result - i;
    return this;
  };
}

核心修改点 #

• 所有运算方法执行完计算逻辑后统一返回this（当前Calculator实例），满足链式调用的要求
• 将原本的私有变量result挂载为实例属性，支持链式调用最后通过.result直接读取最终计算结果
• 调整alert方法的取值逻辑，匹配实例属性的修改，保证延迟弹出的结果正确

内容的提问来源于stack exchange，提问作者Вадим Иващенко