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;
  }
}
相关推荐
喝拿铁写前端1 小时前
前端批量校验还能这么写?函数式校验器组合太香了!
前端·javascript·架构
然我1 小时前
面试官最爱的 “考试思维”:用闭包秒杀递归难题 🚀
前端·javascript·面试
red润2 小时前
被转义字符麻痹的一天:理解转义字符串
前端·javascript·正则表达式
&白帝&3 小时前
vue中常用的api($set,$delete,$nextTick..)
前端·javascript·vue.js
要加油哦~3 小时前
vue | async-validator 表单验证库 第三方库安装与使用
前端·javascript·vue.js
小李小李不讲道理4 小时前
「Ant Design 组件库探索」三:Select组件
前端·javascript·react.js
设计师小聂!4 小时前
vue3 - 自定义hook
开发语言·javascript·ecmascript
伍哥的传说4 小时前
daisyUI 扩展之 pin input 组件开发,极致pin码输入框
前端·javascript·react.js·交互
李明卫杭州4 小时前
浅谈JavaScript中Blob对象
前端·javascript