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;
  }
}
相关推荐
ejinxian11 小时前
Rust的GUI方案中,Slint、Azul、egui、iced、Druid、Tauri
前端·javascript·vue.js
Python私教11 小时前
ShadcnVueAdmin 的国际化是怎么实现的
前端·javascript·vue.js
㳺三才人子11 小时前
容器內的 H2 控制台
开发语言·前端·javascript
薛定谔的猫198212 小时前
gradio学习代码部分
java·前端·javascript
yqcoder12 小时前
React 深度解析:类组件 (Class) vs 函数组件 (Function)
前端·javascript·react.js
HyaCinth13 小时前
一人一周,用 Codex 渐进式迁移重构了一个材料学组件库
前端·javascript·css
心.c13 小时前
大厂高频手写题
开发语言·前端·javascript
zhensherlock15 小时前
Protocol Launcher 系列:Working Copy 文件操作与高级命令详解
javascript·git·typescript·node.js·自动化·github·js
MXN_小南学前端1 天前
watch详解:与computed 对比以及 Vue2 / Vue3 区别
前端·javascript·vue.js
Mr Xu_1 天前
从后端数据到前端图表:深入解析 reduce 与 flatMap 的数据整形实战
前端·javascript