如何实现JavaScript中的链式调用？-js教程-PHP中文网

如何实现JavaScript中的链式调用？

夢幻星辰

发布： 2025-09-18 23:12:20

原创

924人浏览过

链式调用通过方法返回this实现，使多个操作可连续调用，如Calculator类中add、subtract等方法均返回this，从而支持calc.add(5).subtract(3).multiply(2)等形式；其优势在于减少临时变量、提升代码流畅性，适用于构建器模式、jQuery操作或配置参数设置等场景；但应避免链条过长导致可读性下降，需合理拆分并确保每个方法正确返回对象自身。

如何实现javascript中的链式调用？

实现JavaScript中的链式调用，简单来说就是让一个方法在执行完毕后返回

this

登录后复制

，这样就可以继续调用该对象的其他方法了。

解决方案：

核心在于让对象的方法返回对象自身（

this

登录后复制

）。这样，每次方法调用结束后，都会返回同一个对象，从而允许你在返回的对象上继续调用其他方法，形成链式操作。

class Calculator {
  constructor(value = 0) {
    this.value = value;
  }

  add(num) {
    this.value += num;
    return this; // 返回对象自身，实现链式调用
  }

  subtract(num) {
    this.value -= num;
    return this; // 返回对象自身，实现链式调用
  }

  multiply(num) {
    this.value *= num;
    return this; // 返回对象自身，实现链式调用
  }

  divide(num) {
    if (num === 0) {
      throw new Error("Division by zero is not allowed.");
    }
    this.value /= num;
    return this; // 返回对象自身，实现链式调用
  }

  getResult() {
    return this.value;
  }
}

// 使用链式调用
const calc = new Calculator(10);
const result = calc.add(5).subtract(3).multiply(2).getResult(); // 结果是 (10 + 5 - 3) * 2 = 24
console.log(result); // 输出 24

登录后复制

链式调用看起来很酷，但也要注意，过度使用可能会降低代码的可读性，尤其是当链条很长的时候。

立即学习“Java免费学习笔记（深入）”；

链式调用有什么好处？