经典链式调用 Person("Dan").sleep(2).ea

实现：

// Person('Li')
/* 输出:
Hi! This is Hank!
*/
// Person('Dan').sleep(3).eat('dinner')
/* 输出:
Hi! This is Hank!
// 等待10秒..
Wake up after 10
Eat dinner~
*/
// Person('Jerry').eat('dinner~').eat('supper~')
/* 输出:
Hi This is Hank!
Eat dinner~
Eat supper~
*/
Person('Smith').sleepFirst(2).eat('supper')
/* 等待5秒，输出
Wake up after 5
Hi This is Hank!
Eat supper
*/

解答

function Person(name) {
  return new CreatePerson(name)
}

class CreatePerson {
  constructor(name){
    this.tasks = [] // 核心，使用队列（数组）来存储要执行的函数
    this.tasks.push(()=> console.log(`Hi! This is ${name}`))

    this.runTask()
  }

  runTask() {
    // 关键！利用宏任务将事件延迟执行
    // 如果遇到 sleepFirst，可以先将 sleepFirst 压入任务队列，然后按顺序执行
    setTimeout(() => this.exector())
  }

  exector() {
    if(this.tasks.length === 0) return // 递归出口

    const task = this.tasks.shift() // 取出任务

    if(typeof task === "number") {
      setTimeout(() => {
        console.log(`Wake up after ${task}`)
        this.exector() // 递归自身
      }, 2000)
    }
    
    if (typeof task === 'function') {
      task()
      this.exector() // 递归自身
    }

    return this
  }

  // 维护各种任务，用任务队列存储
  eat(food) {
    this.tasks.push(() => console.log(`Eat ${food}~`)) // 常规操作，塞进任务队列
    return this
  }

  sleep(time) {
    this.tasks.push(time) // 常规操作，塞进任务队列
    return this
  }

  sleepFirst(time) {
    console.log(1);
    this.tasks.unshift(time) // 执行：塞进第一项！
    return this
  }
}