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;
  }
}
相关推荐
前端小L5 小时前
双指针专题(三):去重的艺术——「三数之和」
javascript·算法·双指针与滑动窗口
web小白成长日记5 小时前
在Vue样式中使用JavaScript 变量(CSS 变量注入)
前端·javascript·css·vue.js
C_心欲无痕5 小时前
react - useImperativeHandle让子组件“暴露方法”给父组件调用
前端·javascript·react.js
霖鸣6 小时前
Minecraft通过kubejs进行简单魔改
javascript
JackieDYH6 小时前
HTML+CSS+JavaScript实现图像对比滑块demo
javascript·css·html
全栈前端老曹7 小时前
【前端路由】Vue Router 嵌套路由 - 配置父子级路由、命名视图、动态路径匹配
前端·javascript·vue.js·node.js·ecmascript·vue-router·前端路由
EndingCoder7 小时前
安装和设置 TypeScript 开发环境
前端·javascript·typescript
张雨zy8 小时前
Vue 项目管理数据时,Cookie、Pinia 和 LocalStorage 三种常见的工具的选择
前端·javascript·vue.js
五月君_8 小时前
Nuxt UI v4.3 发布:原生 AI 富文本编辑器来了,Vue 生态又添一员猛将!
前端·javascript·vue.js·人工智能·ui
一个处女座的程序猿O(∩_∩)O8 小时前
现代前端开发的三大支柱:TypeScript、ESLint、Prettier 深度解析与完美协作
javascript·typescript