如何實現一個 LazyMan？

網上看到一道 JavaScript 筆試題，感受還挺有意思的，在此記錄一番。

考察知識點：閉包，事件輪詢機制，鏈式調用，隊列

實現一個LazyMan，能夠按照如下方式調用:
LazyMan(「Hank」)輸出:
Hi! This is Hank!

LazyMan(「Hank」).sleep(10).eat(「dinner」)輸出
Hi! This is Hank!
//等待10秒..
Wake up after 10
Eat dinner~

LazyMan(「Hank」).eat(「dinner」).eat(「supper」)輸出
Hi This is Hank!
Eat dinner~
Eat supper~

LazyMan(「Hank」).sleepFirst(5).eat(「supper」)輸出
//等待5秒
Wake up after 5
Hi This is Hank!
Eat supper
以此類推。
複製代碼

下面是 ES6 的實現方式，若是用 ES5 來寫要在維護 this 方面多寫一些代碼。

class _LazyMan {
  constructor(name) {
    this.tasks = [];
    const task = () => {
      console.log(`Hi! This is ${name}`);
      this.next();
    }
    this.tasks.push(task);
    setTimeout(() => {               // 把 this.next() 放到調用棧清空以後執行
      this.next();
    }, 0);
  }

  next() {
    const task = this.tasks.shift(); // 取第一個任務執行
    task && task();
  }

  sleep(time) {
    this._sleepWrapper(time, false);
    return this;                     // 鏈式調用
  }

  sleepFirst(time) {
    this._sleepWrapper(time, true);
    return this;
  }

  _sleepWrapper(time, first) {
    const task = () => {
      setTimeout(() => {
        console.log(`Wake up after ${time}`);
        this.next();
      }, time * 1000)
    }
    if (first) {
      this.tasks.unshift(task);     // 放到任務隊列頂部
    } else {
      this.tasks.push(task);        // 放到任務隊列尾部
    }
  }

  eat(name) {
    const task = () => {
      console.log(`Eat ${name}`);
      this.next();
    }
    this.tasks.push(task);
    return this;
  }
}

function LazyMan(name) {
  return new _LazyMan(name);
}
複製代碼

吐槽一下，最近想換工做，一直在準備面試，複習的時候感受前端能考到的知識點真是多啊。

參考： https://zhuanlan.zhihu.com/p/22387417