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;
  }
}
相关推荐
Man1 小时前
当我们执行 npm run xxx 的时候实际执行逻辑和流程
前端·javascript·前端框架
竹秋…1 小时前
el-table 滚动条小箭头点不了且部分滚动条无法拖动的问题
javascript·vue.js·elementui
做怪小疯子1 小时前
JavaScript 中Array 整理
开发语言·前端·javascript
六元七角八分1 小时前
CSDN文章如何转出为PDF文件保存
开发语言·javascript·pdf
香香爱编程2 小时前
Electron里的electron-window-state 使用
前端·javascript·vue.js·vscode·electron·前端框架
涔溪2 小时前
Vue 中实现 PDF 文件上传
javascript·vue.js·pdf
JohnYan2 小时前
Bun技术评估 - 29 Docker集成
javascript·后端·docker
玉宇夕落2 小时前
JavaScript 执行状态全景图:从调用栈到事件循环,深入理解异步机制
javascript
ohyeah2 小时前
深入理解 JavaScript 数组:从创建到遍历的完整指南
前端·javascript
一室易安2 小时前
模仿elementUI 中Carousel 走马灯卡片模式 type=“card“ 的自定义轮播组件 图片之间有宽度
前端·javascript·elementui