JavaScript实现链式调用

JavaScript链式调用
最近一直在学习JavaScript链式调用这块的东西，所谓的链式调用，简单粗暴的讲，就是在一个实例对象调用完一个方法后，在后边可以一直去调用其他方法，例如，Promise.then()的方法就是一个很好的例子，他可以在后边一直的.then下去。

以下是个人的一些浅理解！！！不是很透彻！！！

那么，链式调用究竟是如何实现的，个人理解：对于同步的链式调用，主要是与对应方法的返回值有关。接下来我们直接上代码

/ 简单的链式调用 /
class Person {
constructor(name, age) {

 this.name = name
 this.age = age

}
info() {

 console.log(`${this.age}的${this.name}`);
 return this

}
start() {

 console.log('开始起床！');
 return this

}
eat() {

 console.log('开始吃饭');
 return this

}
school() {

 console.log('开始上学！');
 return this

}
sleep() {

 console.log('开始睡觉');
 return this

}
}

const person = new Person('小红', 36)
person.info().start().eat().school().sleep()

//36的小红
//开始起床！
//开始吃饭
//开始上学！
//开始睡觉

观察以上的代码，不难发现，在每一个方法上将this返回，也就是指向的是对应的实例对象，然后就可以一直去调用之后的方法。前端培训

那么，如果代码中有了一定的异步任务，此时的话，直接返回this是远远不够的，如果直接调用的话，它可能不会按照代码的调用顺序去打印结果，而是按照浏览器的事件循环机制去执行相关代码，接下来我们上代码来看一下：

/ 如果加上异步代码那该如何实现 /

function Man(name) {
  this.name = name
  // 创建一个数组模拟任务队列
  this.queue = []

  // 用延迟器开启一个事件的总线
  setTimeout(() => {
    // 调用next
    this.next()
  }, 0)

  // 将this返回
  return this
}

Man.prototype.next = function () {
  // 将队列中的第一个任务弹出
  let fn = this.queue.shift()
  // 如果有任务的话就进行调用
  fn && fn()
}
Man.prototype.sayHello = function () {
  let fn = () => {
    console.log('您好，我叫' + " " + this.name);
    this.next()
  }
  // 将该任务添加到队列当中
  this.queue.push(fn)
  return this
}
Man.prototype.eat = function (time) {
  let fn = () => {
    setTimeout(() => {
      console.log(`吃饭花费了 ${time}s`);
    }, time * 1000)
    this.next()
  }
  this.queue.push(fn)
  return this
}

let man = new Man('张娜')
man.sayHello().eat(5)

以上代码中的eat方法，内容是5s后才输出的。

首先我们创建了一个Man的构造函数，然后在其内部创建了一个数组用来模拟控制异步事件，完后构造函数中的setTimeout是任务队列的事件总线，负责去调用next方法。

在next方法中，我们首先将队列中的第一个任务弹出保存，然后在任务存在的时候去执行它。

然后在每一个对应的方法内部去创建一个函数，用来保存对应的功能，功能函数创建完成后需要将其压入到队列当中，然后将this返回。通过这种方式，然后完成链式的调用！