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

你可能感兴趣的:(javascript前端)