前端每日一练：链式调用实现方式

最新推荐文章于 2024-08-18 15:26:38 发布

zero笨小孩

最新推荐文章于 2024-08-18 15:26:38 发布

阅读量436

点赞数 6

分类专栏：前端每日一练文章标签：前端 es6 ecmascript 面试 node.js javascript

本文链接：https://blog.csdn.net/SAXX2/article/details/136649579

版权

前端每日一练专栏收录该内容

62 篇文章 10 订阅

订阅专栏

链式调用是一种优雅的编程风格，特别是在操作对象或执行一系列相似的操作时。这种调用风格使得代码更清晰、简洁，并且易于阅读。在 JavaScript 中，实现链式调用通常借助于返回当前对象的方式。

以下是一种简单的链式调用的实现方式：

class Calculator {
  constructor() {
    this.value = 0;
  }

  add(num) {
    this.value += num;
    return this; // 返回自身，以实现链式调用
  }

  subtract(num) {
    this.value -= num;
    return this;
  }

  multiply(num) {
    this.value *= num;
    return this;
  }

  divide(num) {
    this.value /= num;
    return this;
  }

  getValue() {
    return this.value;
  }
}

const calculator = new Calculator();

const result = calculator
  .add(5)
  .subtract(2)
  .multiply(3)
  .divide(4)
  .getValue();

console.log(result); // 输出 2.25

在这个例子中，每个方法都返回当前对象 this，这样可以在调用方法后继续调用其他方法。通过这种方式，我们可以形成一条链，依次调用多个方法