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;
  }
}
相关推荐
wuhen_n2 小时前
LeetCode -- 15. 三数之和(中等)
前端·javascript·算法·leetcode
脾气有点小暴3 小时前
scroll-view分页加载
前端·javascript·uni-app
前端开发爱好者4 小时前
VSCode 重磅更新!要收费了?
前端·javascript·visual studio code
wuhen_n5 小时前
LeetCode -- 1:两数之和(简单)
javascript·算法·leetcode·职场和发展
假装我不帅5 小时前
jquery.nicescroll使用
前端·javascript·jquery
安_6 小时前
js 数组splice跟slice
开发语言·前端·javascript
Maxkim7 小时前
「✍️JS原子笔记 」深入理解JS数据类型检测的4种核心方式
前端·javascript·面试
小高0077 小时前
Elips-Core:轻量级 Node.js Web 框架核心实现
前端·javascript·node.js
Aotman_7 小时前
Vue MutationObserver 监听
前端·javascript·vue.js·elementui·前端框架·ecmascript
专注前端30年7 小时前
Vue3的生命周期钩子有哪些变化?
前端·javascript·vue.js