当前位置：首页 > JavaScript

js实现链式

2026-03-14 15:59:56JavaScript

链式调用的实现原理

链式调用的核心在于每个方法执行后返回对象本身（this），使得可以继续调用其他方法。这种方式常见于jQuery等库中。

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)
  .subtract(3)
  .multiply(2)
  .getResult(); // 输出24

实现链式调用的关键点

每个方法需要返回当前对象实例（return this）。这使得方法调用可以无限连接下去，直到最后需要获取结果时调用一个不返回this的方法。

更灵活的链式实现

可以通过返回新的实例来实现不可变链式调用，这种方式更适合函数式编程：

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

  add(num) {
    return new ImmutableCalculator(this.value + num);
  }

  subtract(num) {
    return new ImmutableCalculator(this.value - num);
  }
}

const result = new ImmutableCalculator(10)
  .add(5)
  .subtract(3).value; // 输出12

处理异步链式调用

对于异步操作，可以通过返回Promise来实现链式调用：

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

  asyncAdd(num) {
    return new Promise(resolve => {
      setTimeout(() => {
        this.value += num;
        resolve(this);
      }, 1000);
    });
  }
}

new AsyncTask(10)
  .asyncAdd(5)
  .then(instance => instance.asyncAdd(3))
  .then(instance => console.log(instance.value)); // 输出18