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;
  }
}
相关推荐
CC码码11 分钟前
不修改DOM的高亮黑科技,你可能还不知道
前端·javascript·面试
虚诚14 分钟前
vue2中树形表格怎么实现
前端·javascript·vue.js·ecmascript·vue2·树形结构
哈__1 小时前
React Native 鸿蒙跨平台开发:下拉刷新功能
javascript·react native·react.js
没有鸡汤吃不下饭1 小时前
前端打包出一个项目(文件夹),怎么本地快速启一个服务运行
前端·javascript
遇见~未来2 小时前
JavaScript数组全解析:从本质到高级技巧
开发语言·前端·javascript
哈__2 小时前
基础入门 React Native 鸿蒙跨平台开发:TabBar 底部导航栏
javascript·react native·react.js
lili-felicity2 小时前
React Native 鸿蒙跨平台开发:Animated 实现鸿蒙端组件的左右滑动动画
javascript·react native·react.js
哈__2 小时前
React Native 鸿蒙跨平台开发:StatusBar 状态栏组件
javascript·react native·react.js
丢,捞仔3 小时前
uni-app上架应用添加权限提示框
前端·javascript·uni-app
Hilaku3 小时前
我是如何用一行 JS 代码,让你的浏览器内存瞬间崩溃的?
前端·javascript·node.js