JavaScript实现链式调用 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方法中，我们首先将队列中的第一个任务弹出保存，然后在任务存在的时候去执行它。
【JavaScript实现链式调用】然后在每一个对应的方法内部去创建一个函数，用来保存对应的功能，功能函数创建完成后需要将其压入到队列当中，然后将this返回。通过这种方式，然后完成链式的调用！