题目

看到如下的一道题目，有点意思。一道题目包含了很多重要的JS知识点：this指向，闭包，事件轮询，链式调用，队列等。

实现一个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
以此类推。

思考

1. 为了链式调用，每个方法都需要返回this。
2. 任务顺序需要使用队列来确认执行顺序
3. 直接执行LazyMan就有输出，说明在构造时(constructor)就执行了输出，但sleepFirst可能先于这个输出，所以需要使用settimeout，利用Js的轮询机制，在主任务执行完毕后，调用next方法开始执行任务队列。

代码

有了思路，就可以着手写代码，详见注释。

1. ES5 prototype原型链

关键点在代码中注释。

// 定义_LazyMan构造函数
function _LazyMan(name){
    let that = this // 定义that保存this，在返回的方法，或settimeout上下文环境变化的情况下，保证this指向正确
    this.tasks = []  // 创建一个执行队列
    this.tasks.push((n => { // 将方法push进执行队列
        return function(){
            console.log('Hi,this is ' + n + '!')
            that.next() // 队列中的每个方法执行完毕后，执行next方法执行队列中下一个方法
        }
  })(name)) // 立即执行函数，可以返回一个带参数的function。
    setTimeout(function(){that.next()},0)  // settimeout可以让所有的链式方法执行完毕后，再开始执行队列。
}

// 使用prototype绑定方法，实现LazyMan.func()形式的调用
_LazyMan.prototype.next = function(){
    var fn = this.tasks.shift() // 使用Array的shift方法，从队列中取出第一个值，队列也会相应缩短
    fn && fn() // 如果取得到方法，则执行。
}

_LazyMan.prototype.eat = function(food){
  let that = this
    var fn = ((f) => {
        return () => {
            console.log('I eated ' + f + '!')
            that.next() 
        }
    })(food)
    this.tasks.push(fn)  
    return this
}

_LazyMan.prototype.sleep = function(delay){
  let that = this
    var fn = (d => {
    return () => {
          setTimeout(() => {
          console.log('I sleeped '+(d/1000)+'s')
          that.next()
        },d)
      }
    })(delay)
  this.tasks.push(fn)
    return that
}

_LazyMan.prototype.sleepFirst = function(delay){
  let that = this
    var fn = (d => {
      return () => {
          setTimeout(() => {
          console.log('At first! sleep '+(d/1000)+'s')
          that.next()
        },d)
      }
    })(delay)
    this.tasks.unshift(fn)  //!! sleepFirst比较特殊，使用unshift把方法添加到队列最前，从而实现首先执行。
    return this
}

// 工厂模式返回LazyMan
function LazyMan(name){
    return new _LazyMan(name)
}

LazyMan('Eason').sleep(1000).eat('fish').eat('egg').sleep(500)
// At first! sleep 1s
// Hi,this is Eason!
// I eated fish!
// I eated egg!
// I sleeped 0.5s

2. ES6 Class改写

用ES6的Class特性修改明显变优雅很多。

class _LazyMan {
    constructor(name){
      let that = this
      this.tasks = [],
      this.fn = ((n)=>{
            return ()=>{
              console.log("this is "+ n +"!(By Class)")
              that.next()
            }
          })(name)
      this.tasks.push(this.fn)
      setTimeout(() => {
        that.next()
      }, 0);
      return this
    }
  
    next(){
      var fn = this.tasks.shift()
      fn && fn()
    }
    
    eat(food){
      let fn = ((f)=>{
          return ()=>{
              console.log('eat '+ f)
              this.next()
          }
      })(food)
      this.tasks.push(fn);
      return this
    }

    sleep(delay,immedia = false){
        let that = this
        let fn = ((d,i)=>{
            return ()=>{
                setTimeout(()=>{
                    console.log(`${i ? 'sleepFisrt ' : 'sleep '}` + (d/1000) + 's')
                    that.next()
                },d)

            }
        })(delay,immedia)
        immedia ? this.tasks.unshift(fn) : this.tasks.push(fn);
        return this
    }

    sleepFirst(delay){
        return this.sleep(delay,true)
    }
}
  
let LazyMan = function (name){
    return new _LazyMan(name)
}
LazyMan('').eat('fish').sleepFirst(1000).sleep(2000)
  
  

3. Promise实现

队列执行任务，Promise也有类似的属性，尝试用Promise实现。
参考：如何实现一个LazyMan
这个文章里的例子有小错误，修改后如下。用Promise实现LazyMan没有发挥Promise对于异步链式操作的方便性，反而让逻辑看起来很复杂，能实现，但并不好。

function _LazyMan(name){
  this.orderPromise=this.newPromise(); // 定义顺序promise对象
  this.insertPromise=this.newPromise(); // 定义插入promise对象
  this.order(function(resolve){
    console.log(name);
    resolve();
  })
}

_LazyMan.prototype={
  /*实例化promise对象工厂*/
  newPromise:function(){
    return new Promise(function(resolve,reject){
      resolve();
    })
  },
  order:function(fn){
    var self=this;
    this.orderPromise=this.orderPromise.then(function(){
      return new Promise(function(resolve,reject){
        //如果有insertPromise,阻塞orderPromise.
        if (self.fir) {
            self.insertPromise.then(function(){
                fn(resolve)
              })
        }else{

            fn(resolve)
        }
      })
    })
  },
  insert:function(fn){
    var self=this;
    this.fir=true;
    this.insertPromise=this.insertPromise.then(function(){
      return new Promise(function(resolve,reject){
        fn(resolve);
        self.fir=false;
      })
    })
  },
  firstTime:function(time){
    let fn = resolve=>{
        setTimeout(function(){
            console.log('wait '+time+' s,other logic');
            resolve();
          },time*1000)
    }
    this.insert(fn);
    return this;
  },
  eat:function(something){
    let fn = resolve =>{
        console.log(something+' ~~');
        resolve();
    }
    this.order(fn);
    return this;
  },
  sleep:function(time){
    let fn = resolve =>{
        setTimeout(function(){
            console.log('sleep '+time+' s');
            resolve();
          },time*1000);
    }
    this.order(fn);
    return this;
  }
}

//接口封装。
function LazyMan(name) {
    return new _LazyMan(name);
}
//调用测试
LazyMan('RoryWu').sleep(2).eat('dinner').eat('breakfast');
// 弹出：
// wait 1 s, other logic
// wait 3 s, other logic
// RoryWu
// sleep 2 s
// dinner~~
// breakfast~~