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;
  }
}
相关推荐
我命由我123451 小时前
CSS 锚点定位 - 锚点定位引入(anchor-name、position-anchor)
开发语言·前端·javascript·css·学习·html·学习方法
哟哟耶耶2 小时前
js-清除首尾空白字符再进行空白匹配str.trim().match(...)
开发语言·前端·javascript
亚林瓜子2 小时前
nodejs里面的百分号解码之URLSearchParams
开发语言·javascript·ecmascript·node·url·百分号编码
南山安2 小时前
React学习:通过TodoList,完整理解组件通信
javascript·react.js·前端框架
瘦的可以下饭了2 小时前
Day04-APIs 日期对象
javascript
用户72600745695802 小时前
彻底搞懂前端动态图片加载:Vue、Vite与Webpack完全指南
javascript
风止何安啊2 小时前
Steam玩累了?那用 Node.js 写个小游戏:手把手玩懂 JS 运行环境
前端·javascript·node.js
天外天-亮2 小时前
Vue 中常用的指令
前端·javascript·vue.js
清风细雨_林木木2 小时前
vite与vue的cli的区别
前端·javascript·vue.js
亚洲小炫风3 小时前
react 资源清单
前端·javascript·react.js