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;
  }
}
相关推荐
栉甜2 小时前
Vue2学习内容(上)
前端·javascript·vue.js·学习
shmily麻瓜小菜鸡3 小时前
TypeScript 知识点补充(第三部分:工程化与高级类型)
前端·javascript·typescript
Hilaku4 小时前
前端的技术判断力是怎么练出来的?
前端·javascript·程序员
miofly5 小时前
GitHub 今日推荐|floorplan:AI 读代码自动画交互式架构地图
javascript·开源·github
Dovis(誓平步青云)5 小时前
拖动关键帧角色就抽动,动画编辑器怎样补齐中间状态
开发语言·前端·javascript·机器学习·编辑器
lpfasd1235 小时前
pywebview与Electron
前端·javascript·electron
行走的陀螺仪6 小时前
Claude Code 从入门到实战(一):安装、登录与第一个Vue项目
前端·javascript·vue.js
vipxieliang6 小时前
解构赋值与展开运算符:现代 JS 提效技巧
javascript
2603_965896626 小时前
JavaScript 原型与原型链
开发语言·前端·javascript
晓得迷路了6 小时前
栗子前端技术周刊第 152 期 - Rspack 2.3、TypeScript 7.1 Beta、Bun 1.4.4...
前端·javascript·css