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;
  }
}
相关推荐
Lsx-codeShare8 分钟前
一文读懂 Uniapp 小程序登录流程
前端·javascript·小程序·uni-app
一 乐12 分钟前
农产品电商|基于SprinBoot+vue的农产品电商系统(源码+数据库+文档)
java·前端·javascript·数据库·vue.js·spring boot
地狱恶犬萨煤耶32 分钟前
JavaScript-小游戏-2048
javascript
爱心发电丶40 分钟前
基于UniappX开发电销APP,实现CRM后台控制APP自动拨号
javascript
地狱恶犬萨煤耶41 分钟前
JavaScript-实现函数方法-改变this指向call apply bind
javascript
地狱恶犬萨煤耶1 小时前
JavaScript-小游戏-单词消消乐
javascript
tyro曹仓舒1 小时前
干了10年前端,才学会使用IntersectionObserver
前端·javascript
mine_mine2 小时前
油猴脚本拦截fetch和xhr请求,实现修改服务端接口功能
javascript
一 乐3 小时前
考公|考务考试|基于SprinBoot+vue的考公在线考试系统(源码+数据库+文档)
前端·javascript·数据库·vue.js·spring boot·课程设计
林太白3 小时前
跟着TRAE SOLO全链路看看项目部署服务器全流程吧
前端·javascript·后端