javascript如何实现链式调用_它如何工作

JavaScript链式调用的核心是每个方法返回对象（通常是this或新实例），使后续调用可继续；中间操作如add、filter返回this或新对象，终结操作如getValue、toString返回结果值并终止链。

JavaScript 实现链式调用的核心是：每个方法都返回一个对象（通常是当前实例 this），使得下一次调用可以继续在该对象上进行。

链式调用的关键：方法必须返回对象

如果一个方法执行完后返回 this（即当前实例），那它就能接下一个方法。否则，链就断了。

• 普通函数返回 undefined，无法链式调用
• 类方法显式返回 this，就支持链式
• 也可以返回新对象（如 Immutable 模式），但常见的是返回 this

简单例子：手写一个可链式调用的计算器

下面是一个基础实现：

class Calculator {
  constructor(value = 0) {
    this.value = value;
  }
  add(n) {
    this.value += n;
    return this; // ← 关键：返回 this
  }
  multiply(n) {
    this.value *= n;
    return this; // ← 同样返回 this
  }
  getValue() {
    return this.value;
  }
}

// 使用：
const result = new Calculator(5).add(3).multiply(2).getValue(); // → 16

注意返回值类型和中断点

不是所有方法都要链式。像取值、转字符串、提交等“终结操作”，通常不返回 this，而是返回结果值，链自然终止。

• add()、set()、filter() 等中间操作：返回 this 或新实例
• getValue()、toString()、submit() 等终结操作：返回最终值，不再支持链
• 错误处理时也可主动中断链（例如返回 null 或抛错）

真实场景中的链式：Array.prototype 和 jQuery

原生数组方法如 map、filter、reduce 是链式的（返回新数组）；jQuery 的 $().css().show().on() 则靠每个方法都返回 jQuery 实例实现。

• 数组链式依赖「纯函数 + 返回新数组」，不修改原数组
• jQuery 链式依赖「方法内部操作 DOM + 始终返回 this」
• 现代库如 Lodash 的链式（_.chain(...).map(...).value()）则靠封装 + 显式终结调用

基本上就这些。链式调用不复杂，但容易忽略“返回什么”这个关键点。