JavaScript链式调用（基础篇）

原创

雷斯蒂姆 2025-10-20 12:10:10 ©著作权

©著作权归作者所有：来自51CTO博客作者雷斯蒂姆的原创作品，请联系作者获取转载授权，否则将追究法律责任

一、什么是链式调用？

链式调用（Method Chaining）是一种让多个方法通过连续的“点操作符”调用的编码风格

// 示例：jQuery 的链式调用
$("#myDiv")
  .css("color", "red")
  .addClass("highlight")
  .fadeOut(1000);

链式调用的核心特点是：每个方法执行后返回对象本身（或其他对象），从而可以继续调用下一个方法。

二、如何实现链式调用？

1. 基础实现原理

在对象的方法中，通过 return 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;
  }


  getResult() {
    return this.value;
  }
}


// 链式调用
const result = new Calculator(10)
  .add(5)        // 10 + 5 = 15
  .subtract(3)   // 15 - 3 = 12
  .multiply(2)   // 12 * 2 = 24
  .getResult();  // 最终结果


console.log(result); // 输出 24

2. 关键点总结

每个方法必须返回对象本身（return this）。
如果某个方法不需要返回对象（如 getResult()），则不参与链式调用。

三、链式调用的实际应用场景

1. 处理数组的链式调用

JavaScript 的数组方法（如 map、filter、reduce）天然支持链式调用：

const numbers = [1, 2, 3, 4, 5];


const result = numbers
  .map(num => num * 2)    // [2, 4, 6, 8, 10]
  .filter(num => num > 5) // [6, 8, 10]
  .reduce((sum, num) => sum + num, 0); // 24


console.log(result); // 输出 24

2. 自定义类的链式调用（如 UI 组件）

class Dialog {
  constructor(text) {
    this.text = text;
    this.color = "black";
    this.duration = 1000;
  }


  setColor(color) {
    this.color = color;
    return this;
  }


  setDuration(duration) {
    this.duration = duration;
    return this;
  }


  show() {
    console.log(`显示弹窗：${this.text}，颜色：${this.color}，持续 ${this.duration}ms`);
  }
}


// 链式调用配置弹窗
new Dialog("Hello!")
  .setColor("blue")
  .setDuration(2000)
  .show();

四、链式调用的优缺点

优点：

代码简洁：减少重复代码，提高可读性。
流程清晰：按顺序执行多个操作，逻辑一目了然。

缺点：

调试困难：链式调用中若某一步出错，难以定位具体位置。
返回类型限制：必须返回对象本身，不适合需要返回其他值的场景。

五、常见问题与解决方案

问题1：忘记写 `return this`

// 错误示例：未返回 this，链式调用中断
class BadExample {
  methodA() {
    console.log("A");
    // 没有 return this！
  }
}


const obj = new BadExample();
obj.methodA().methodB(); // 报错：TypeError