JS 实现链式调用

什么是链式调用?

链式调用(Chaining Method Calls)是一种编程技巧,即连续调用一个类中的多个方法,比如

js 复制代码
// 创建一个计算机对象实例
const calc = new Calculator();
// 使用链式调用 add 方法,实现连续累加
const result = calc.add(1).add(2).result;

console.log(result); // 输出:3

技术要点

支持链式调用的对象方法,必须返回对象自身(以便后续继续调用对象方法)

代码实现

js 复制代码
// 声明类 Calculator - 计算器
class Calculator {
  // 创建对象实例时,初始化属性 result 的值为 0
  constructor() {
    this.result = 0;
  }

  // 对象方法-add 求和
  add(num) {
    this.result += num;
    // 返回当前对象,以支持链式调用
    return this;
  }
}
相关推荐
敲敲了个代码2 小时前
[特殊字符] Web 字体裁剪优化实践:把 42MB 字体包瘦到 1.6MB
前端·javascript·学习·html·web
change_fate2 小时前
vue3 懒加载第三方组件
javascript·vue.js·ecmascript
扎瓦斯柯瑞迫2 小时前
Cursor 提示"Too Many Accounts"?一行命令重置机器码
前端·javascript·后端
前端付豪2 小时前
Vue3 响应式来!
前端·javascript·vue.js
Dontla3 小时前
JS睡眠函数(JS sleep()函数、JS单线程、Event Loop事件循环)假睡眠
开发语言·javascript·ecmascript
lumi.3 小时前
前端本地存储技术笔记:localStorage 与 sessionStorage 详解
前端·javascript·笔记
炫饭第一名3 小时前
🌍🌍🌍字节一面场景题:异步任务调度器
前端·javascript·面试
丘耳3 小时前
vis-network 知识点笔记
前端·javascript
你说啥名字好呢4 小时前
【React的Fiber及中断-重启逻辑的设计】
javascript·react.js
小白的码BUG之路4 小时前
Vue3 -- 响应式 ref和 reactive
前端·javascript·vue.js