一句话解释JS链式调用

PasserbyX2025-06-09 18:46

结论

实现链式调用的核心：每个方法执行完毕后返回对象本身（this）。

注意事项

链式调用适合不需要返回值的方法
过度使用链式可能会降低代码可读性
调试链式调用可能比普通调用更难

链式调用非常优雅，但是要注意不要滥用！

案例

题目1：基础实现题

题目：请实现一个简单的 StringBuilder 类，支持链式调用方法 append() 和 toString()，示例用法如下：

go 复制代码

const sb = new StringBuilder();
const result = sb.append('Hello').append(' ').append('World').toString();
console.log(result); // 输出 "Hello World"

kotlin 复制代码

export class StringBuilder {
    constructor() {
        this.str = ''
    }
    append(str) {
        this.str += str
        return this
    }
    toString() {
        return this.str
    }
}

题目2：实现计算器

实现一个 Calculator 类，支持链式调用加减乘除运算，最后通过 value 属性获取结果。

typescript 复制代码

export class Calculator {
    constructor() {
        this.value = 0;
    }
    add(number) {
        this.value += number
        return this
    }
    subtract(number) {
        this.value -= number
        return this
    }
    multiply(number) {
        this.value *= number
        return this
    }
    divide(number) {
        this.value /= number
        return this
    }
}

题目3：原理分析

为什么能实现链式调用？

因为调用某个具体的方法之后，最终返回了 this 本身。

如果要去掉链式调用特性，最少需要修改哪些地方？

只要去掉 return this

这种模式有什么优缺点？

优点：

函数使用起来更加直观（可读性更强）
更加简介、流畅

缺点

调试相对困难，需要增加一些日志来简易调试。
错误处理变得复杂

kotlin 复制代码

class Query {
  constructor(selector) {
    this.element = document.querySelector(selector);
  }

  css(property, value) {
    if (this.element) {
      this.element.style[property] = value;
    }
    return this;
  }

  addClass(className) {
    if (this.element) {
      this.element.classList.add(className);
    }
    return this;
  }

  on(event, callback) {
    if (this.element) {
      this.element.addEventListener(event, callback);
    }
    return this;
  }
}

// 使用示例
new Query('#myBtn')
  .css('color', 'red')
  .addClass('active')
  .on('click', () => console.log('Clicked!'));