当前位置：首页 > JavaScript

js实现链式

2026-02-01 16:55:02JavaScript

链式调用的实现原理

链式调用（Method Chaining）是JavaScript中一种常见的编程模式，允许在单个对象上连续调用多个方法。核心原理是每个方法执行后返回对象本身（this），使得后续方法可以继续在同一个对象上调用。

js实现链式

基本实现方式

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;
  }

  divide(num) {
    this.value /= num;
    return this;
  }
}

// 使用示例
const result = new Calculator(10)
  .add(5)
  .subtract(3)
  .multiply(2)
  .divide(4).value; // 结果为6

函数式链式调用

对于非面向对象的情况，可以使用闭包实现链式调用：

js实现链式

function createChain() {
  let value = 0;

  const chain = {
    add(num) {
      value += num;
      return this;
    },
    getValue() {
      return value;
    }
  };

  return chain;
}

createChain().add(5).add(3).getValue(); // 8

jQuery风格的链式调用

DOM操作库常用这种模式：

const $ = (selector) => {
  const elements = document.querySelectorAll(selector);

  return {
    css(prop, value) {
      elements.forEach(el => el.style[prop] = value);
      return this;
    },
    addClass(className) {
      elements.forEach(el => el.classList.add(className));
      return this;
    }
  };
};

$('div').css('color', 'red').addClass('active');

异步链式调用

结合Promise实现异步链式：

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

  then(fn) {
    this.promise = this.promise.then(fn);
    return this;
  }

  catch(fn) {
    this.promise = this.promise.catch(fn);
    return this;
  }
}

new AsyncChain(10)
  .then(x => x * 2)
  .then(console.log); // 20