JS中链式调用的实现和应用

你好同学，我是沐爸，欢迎点赞、收藏、评论和关注。

不知你是否注意过，链式调用在编程中还是很普遍的，无论是原生JavaScript还是在一些框架和库中，都会看到它们的身影。今天我们一探究竟，看下链式调用是怎么实现的，以及在项目中的应用吧。

在JavaScript中，链式调用（Chaining）是一种非常流行的设计模式，它允许你以流畅的方式连续调用同一个对象的方法。链式调用通常是通过在每个方法的末尾返回对象本身（通常是**this**关键字）来实现的。这样做的好处是代码更加简洁、易读，并且提高了代码的可维护性。

链式调用的实现

构造函数的实现

function Chain(value = 0) {
   
  this.value = value

  // 设置value的值并返回对象本身
  this.setValue = function (value) {
   
    this.value = value
    return this
  }

  // 增加value的值并返回对象本身
  this.addValue = function (value) {
   
    this.value += value
    return this
  }

  // 返回value的值
  this.getValue = function () {
   
    return this.value // 这里不返回this，因为getValue后通常不需要继续链式调用
  }
}

// 使用
const chain = new Chain()
let res = chain.setValue(5).addValue(10).getValue()
console.log(res) // 15

在这个例子中，Chain类的每个方法（除了getValue，因为它不参与链式调用）在执行完自己的任务后，都返回了对象本身（this），这允许你能够连续地调用这些方法。

原型的实现

使用原型prototye改写构造函数示例：

function Chain(value = 0) {
   
  this.value = value
}

Chain.prototype.setValue = function (value) {
   
  this.value = value
  return this
}

Chain.prototype.addValue = function (value) {
   
  this.value += value
  return this
}

Chain.prototype.getValue = function () {
   
  return this.value
}

// 使用
const chain = new Chain()
let res = chain.setValue(5).addValue(10).getValue()
console.log(res) // 15

Chain 函数定义了 value 属性，并使用 Chain.prototype 来定义 setValue、addValue 和 getValue 方法。这些方法都是实例方法，它们修改或返回 value 属性的值，并返回 this 以支持链式调用。

类的实现

使用类class改写普通函数示例：

class Chain {
   
  constructor(value = 0) {
   
    this.value = value
  }

  setValue(value