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;
  }
}
相关推荐
梦6506 分钟前
Vue 组件 vs React 组件深度对比
javascript·vue.js·react.js
2501_9462309819 分钟前
Cordova&OpenHarmony提醒管理系统实现
android·javascript
C_心欲无痕20 分钟前
vue3 - useId生成唯一标识符
前端·javascript·vue.js·vue3
KoalaShane21 分钟前
El-slider 增加鼠标滚动滑块事件
开发语言·前端·javascript
C_心欲无痕34 分钟前
vue3 - watchSyncEffect同步执行的响应式副作用
开发语言·前端·javascript·vue.js·vue3
小魔女千千鱼1 小时前
在 Vue 中,this 的行为在箭头函数和普通函数中是不同的
前端·javascript·vue.js
Rysxt_1 小时前
UniApp uni_modules 文件夹详细教程
开发语言·javascript·ecmascript
霍理迪1 小时前
CSS盒模型布局规则
前端·javascript·css
林恒smileZAZ2 小时前
使用自定义API接入OpenAI CodeX配置教程
javascript·codex·ai对接
千寻girling2 小时前
面试官: “ 说一下 JS 中什么是事件循环 ? ”
前端·javascript