一句话解释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 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
脑袋大大的3 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络5 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way5 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689976 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽7 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头7 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github