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;
  }
}
相关推荐
SuperEugene40 分钟前
Vue3 模板语法规范实战:v-if/v-for 不混用 + 表达式精简,避坑指南|Vue 组件与模板规范篇
开发语言·前端·javascript·vue.js·前端框架
Luna-player1 小时前
Vue 3 + Vue Router 的路由配置,简单示例
前端·javascript·vue.js
敲代码的约德尔人1 小时前
JavaScript 设计模式完全指南
javascript·设计模式
angerdream1 小时前
最新版vue3+TypeScript开发入门到实战教程之Vue3详解props
javascript·vue.js
~欲买桂花同载酒~2 小时前
项目优化-vite打包优化
前端·javascript·vue.js
kyriewen2 小时前
JavaScript 继承的七种姿势:从“原型链”到“class”的进化史
前端·javascript·ecmascript 6
wangfpp3 小时前
性能优化,请先停手:为什么我劝你别上来就搞优化?
前端·javascript·面试
三旬83 小时前
Day.js 源码深度剖析:极简时间库的设计艺术
javascript
清风徐来QCQ4 小时前
js中的模板字符串
开发语言·前端·javascript