如何创建可复用的JavaScript链式函数？普通链式实现遇复用难题

嘿，这个问题我之前也折腾过！普通链式调用能跑起来，核心是每个方法都返回实例本身，但要做可复用的链式函数，关键得把通用逻辑抽离出来，别把所有方法都硬编码在一个类里。我给你几个实用的实现思路，你可以根据场景选：

1. 用Mixin（混入）实现方法复用 #

把通用的链式方法抽成独立的Mixin对象，然后合并到基础类的原型上。这样不同的链式类都能复用这些方法，还能随时扩展新方法。

// 抽离通用的运算方法Mixin
const arithmeticMixins = {
  plus(num) {
    this.value += num;
    return this; // 返回实例维持链式
  },
  minus(num) {
    this.value -= num;
    return this;
  },
  multiply(num) {
    this.value *= num;
    return this;
  }
};

// 基础的链式骨架类
class ChainableBase {
  constructor(initialValue = 0) {
    this.value = initialValue;
  }

  execute() {
    return this.value;
  }
}

// 把Mixin合并到类原型，让所有实例都能用这些方法
Object.assign(ChainableBase.prototype, arithmeticMixins);

// 还能随时扩展新的Mixin
const powerMixin = {
  power(exp) {
    this.value = Math.pow(this.value, exp);
    return this;
  }
};
Object.assign(ChainableBase.prototype, powerMixin);

// 测试一下
const calc = new ChainableBase(0);
console.log(calc.plus(5).power(2).execute()); // 输出25

2. 工厂函数动态生成可复用链式实例 #

如果不想用类，可以用工厂函数动态添加方法，甚至能在不同实例之间复用方法定义，灵活性更高：

function createChainable(initialValue) {
  const instance = {
    value: initialValue,
    execute() {
      return this.value;
    },
    // 动态添加方法的工具
    addMethod(name, fn) {
      this[name] = function(...args) {
        fn.call(this, ...args);
        return this; // 维持链式
      };
      return this; // 连addMethod都能链式调用
    }
  };

  return instance;
}

// 创建第一个实例，定义方法
const calc = createChainable(0)
  .addMethod('plus', function(num) { this.value += num; })
  .addMethod('multiply', function(num) { this.value *= num; });

console.log(calc.plus(5).multiply(3).execute()); // 输出15

// 另一个实例，直接复用之前定义的方法
const anotherCalc = createChainable(10)
  .addMethod('plus', calc.plus)
  .addMethod('multiply', calc.multiply);

console.log(anotherCalc.plus(2).multiply(2).execute()); // 输出24

3. 函数式纯链式（无副作用） #

如果偏好函数式编程，不想用实例的可变状态，可以让每个方法返回新的实例，操作逻辑抽成纯函数，复用性拉满：

// 抽离纯函数操作
const plus = (num) => (currentValue) => currentValue + num;
const minus = (num) => (currentValue) => currentValue - num;

// 链式骨架的工厂函数
const createChainableFn = (value) => ({
  run: (fn) => createChainableFn(fn(value)),
  execute: () => value
});

// 使用
const result = createChainableFn(0)
  .run(plus(5))
  .run(plus(2))
  .execute(); // 输出7

核心要点总结 #

• 链式的本质：每个方法必须返回当前实例（或新实例），这样才能继续调用下一个方法。
• 复用的关键：把通用操作逻辑抽离成独立模块/函数，避免硬编码在单一类或实例里。
• 选哪种方式：面向对象风格（Mixin/类）适合需要维护状态的场景；函数式风格适合无副作用的纯逻辑场景。

内容的提问来源于stack exchange，提问作者eclipseeer