链式调用是什么写法日常维护方法与实用案例

发布时间：2025-12-14 16:38:21 阅读：121 次

你有没有在写代码的时候，看到别人一连串点下去的方法，像 obj.method1().method2().method3() 这样？这种写法看起来很流畅，其实它就是“链式调用”。

链式调用的基本原理

链式调用的核心在于：每一个方法执行完后，返回的是当前对象本身（也就是 this），这样就可以继续调用下一个方法。如果方法不返回对象，链就断了。

举个生活中的例子：就像你在自助餐厅打饭，先拿盘子，然后加菜、加饭、加汤，每一步操作完服务员都把盘子还给你，你才能继续下一步。如果某一步他把盘子收走了，你就没法继续加了——链式调用也一样，每个方法得“把对象还回来”才行。

一个简单的 JavaScript 示例

下面是一个支持链式调用的简单对象：

const calculator = {
  value: 0,

  add: function(num) {
    this.value += num;
    return this; // 返回自身，才能链下去
  },

  multiply: function(num) {
    this.value *= num;
    return this;
  },

  print: function() {
    console.log(this.value);
    return this; // 即便打印也返回，保持链条完整
  }
};

// 使用链式调用
calculator.add(5).multiply(2).print(); // 输出 10

注意每个方法最后都有 return this;，这就是能连续点下去的关键。

jQuery 中的经典用法

早期前端开发中，jQuery 是链式调用的典型代表。比如：

$('#myDiv')
  .css('color', 'red')
  .addClass('highlight')
  .fadeIn();

一行代码完成多个操作，不用反复选元素，既简洁又高效。

怎么写出自己的链式调用？

想让你的对象支持链式调用，记住一点：所有要参与链的方法，最后都要返回 this。

如果你写的是类（class），也是一样：

class Person {
  constructor(name) {
    this.name = name;
    this.age = 0;
    this.job = '';
  }

  setAge(age) {
    this.age = age;
    return this;
  }

  setJob(job) {
    this.job = job;
    return this;
  }

  introduce() {
    console.log(`我是${this.name}，${this.age}岁，职业是${this.job}`);
    return this;
  }
}

// 使用
new Person('小明')
  .setAge(25)
  .setJob('程序员')
  .introduce();

这样的写法让初始化配置变得非常直观，尤其适合构建配置类或工具类对象。

不是所有方法都适合链

有些方法天然不适合返回对象，比如计算结果、判断真假等。像 length、indexOf、validate() 返回布尔值的，一旦调用就会中断链条。这时候就别强求链式，该断就断。