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;
  }
}
相关推荐
Van_Moonlight17 分钟前
RN for OpenHarmony 实战 TodoList 项目:任务完成进度条
javascript·开源·harmonyos
Van_Moonlight25 分钟前
RN for OpenHarmony 实战 TodoList 项目:深色浅色主题切换
javascript·开源·harmonyos
小贵子的博客27 分钟前
Ant Design Vue <a-table>
前端·javascript·vue.js·anti-design-vue
天天进步201530 分钟前
【Nanobrowser源码分析4】交互篇: 从指令到动作:模拟点击、滚动与输入的底层实现
开发语言·javascript·ecmascript
console.log('npc')36 分钟前
vue2中子组件父组件的修改参数
开发语言·前端·javascript
Van_captain44 分钟前
rn_for_openharmony常用组件_Chip纸片
javascript·开源·harmonyos
奋斗吧程序媛1 小时前
vue3 Study(1)
前端·javascript·vue.js
QQ12958455041 小时前
ThingsBoard - APP首页修改为手工选择组织
前端·javascript·物联网·iot
whyfail1 小时前
前端数据存储新选择:IndexedDB与Dexie.js技术指南
前端·javascript·数据库
椰果uu1 小时前
vue-virtual-scroller-虚拟滚动列表:渲染不定高度长列表+可控跳转
前端·javascript·typescript·vue