一句话解释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!'));
相关推荐
abigale0316 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者35 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile39 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_4166399741 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊1 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火1 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
脑袋大大的6 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络7 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码