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 小时前
JavaScript 中处理时间格式的核心方式
前端·javascript
C_心欲无痕5 小时前
vue3 - 类与样式的绑定
javascript·vue.js·vue3
南山安6 小时前
Tailwind CSS:顺风CSS
javascript·css·react.js
栀秋6667 小时前
防抖 vs 节流:从百度搜索到京东电商,看前端性能优化的“节奏哲学”
前端·javascript
有意义7 小时前
深入防抖与节流:从闭包原理到性能优化实战
前端·javascript·面试
2503_928411568 小时前
12.26 小程序问题和解决
前端·javascript·微信小程序·小程序
over6978 小时前
防抖与节流:前端性能优化的“双子星”,让你的网页丝滑如德芙!
前端·javascript·面试
red润8 小时前
手把手封装Iframe父子单向双向通讯功能
前端·javascript·vue.js
gustt8 小时前
JavaScript 闭包实战:手写防抖与节流函数,优化高频事件性能
前端·javascript·面试
止水编程 water_proof8 小时前
JQuery 基础
前端·javascript·jquery