一句话解释JS链式调用

结论

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

注意事项

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

链式调用非常优雅,但是要注意不要滥用!

案例

题目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:原理分析

  1. 为什么能实现链式调用?

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

  1. 如果要去掉链式调用特性,最少需要修改哪些地方?

只要去掉 return this

  1. 这种模式有什么优缺点?

优点:

  • 函数使用起来更加直观(可读性更强)
  • 更加简介、流畅

缺点

  • 调试相对困难,需要增加一些日志来简易调试。
  • 错误处理变得复杂
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!'));
相关推荐
天生我材必有用_吴用2 分钟前
vue3实战九、vue3+vue-cropper实现头像修改
前端
拳打南山敬老院10 分钟前
从零构建一个插件系统(四)插件的缓存
javascript·架构
Sobeit10 分钟前
ES2025 颠覆性 JS 黑科技新特性详解
前端
new_abc17 分钟前
net-snmp添加自定义mib树
服务器·前端·javascript
前端梭哈攻城狮23 分钟前
dify二开示例
前端·后端·python
该用户已不存在26 分钟前
Node.js 真的取代了PHP吗?
前端·后端·node.js
ze_juejin35 分钟前
JavaScript 的事件循环(Event Loop)机制
前端
前端缘梦39 分钟前
从源码到dist:拆解Webpack如何完成前端工程的"基因编译"
前端·webpack
热爱运维的小七44 分钟前
中型企业如何用 RUM 技术破解地理分布式用户体验难题?从指标监测到优化实操
前端·网站响应速度·地域访问
程序猿阿伟1 小时前
《从点击到共鸣:论坛前端如何用交互细节编织用户体验》
前端·ux