当前位置：首页 > JavaScript

js函数实现链式调用

2026-01-31 02:25:13JavaScript

链式调用的实现原理

链式调用的核心在于每次方法调用后返回对象本身（this），使得后续方法可以继续在同一个对象上操作。这种方式常见于jQuery等库中，通过连续的点语法调用多个方法。

基础实现方式

定义一个包含多个方法的对象，每个方法执行后返回this：

js函数实现链式调用

function Calculator() {
  this.value = 0;

  this.add = function(num) {
    this.value += num;
    return this;
  };

  this.subtract = function(num) {
    this.value -= num;
    return this;
  };

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

  this.result = function() {
    return this.value;
  };
}

// 使用示例
const calc = new Calculator();
const result = calc.add(5).multiply(2).subtract(3).result();
console.log(result); // 输出7

类语法实现

使用ES6类语法可以更清晰地实现链式调用：

js函数实现链式调用

class Chainable {
  constructor() {
    this.value = '';
  }

  append(str) {
    this.value += str;
    return this;
  }

  prepend(str) {
    this.value = str + this.value;
    return this;
  }

  toString() {
    return this.value;
  }
}

// 使用示例
const chain = new Chainable();
const output = chain.append('world').prepend('Hello ').toString();
console.log(output); // 输出"Hello world"

函数式编程实现

不使用this，通过闭包和函数组合实现链式调用：

function chain(value) {
  return {
    map: (fn) => chain(fn(value)),
    filter: (fn) => chain(fn(value) ? value : undefined),
    value: () => value
  };
}

// 使用示例
const result = chain(5)
  .map(x => x * 2)
  .filter(x => x > 5)
  .value();
console.log(result); // 输出10

异步链式调用

通过返回Promise实现异步操作的链式调用：

class AsyncChain {
  constructor(promise) {
    this.promise = promise || Promise.resolve();
  }

  then(fn) {
    return new AsyncChain(this.promise.then(fn));
  }

  catch(fn) {
    return new AsyncChain(this.promise.catch(fn));
  }
}

// 使用示例
new AsyncChain()
  .then(() => fetch('api/data'))
  .then(res => res.json())
  .catch(err => console.error(err));