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返回。通过这种方式，然后完成链式的调用！