简略图（徒手画略丑）

闲逛的时候发现了一道LazyMan的前端面试题，感觉挺有意思，下面给出本人的结题思路，以及关于promise的一些基础

promise基础

一、异步：现在与将来

1. 事件循环

<!--eventLoop 是一个用作队列的数组-->
<!--(先进先出)-->
var eventLoop = [];
var event;

<!--"永远"执行-->
while(true){
    <!--一次 tick-->
    if(eventLoop.length>0){
        <!--拿到队列中的下一个事件-->
        event = eventLoop.shift();
        <!--现在，执行下一个事件-->
        try{
            event();
        }
        catch(err){
            reportError(err);
        }
    }
}

一定要清楚，setTimeout(..) 并没有把你的回调函数挂在事件循环队列中。它所做的是设定一个定时器。当定时器到时后，环境会把你的回调函数放在事件循环中，这样，在未来某个时刻的tick会摘下并执行这个回调函数

程序通常分成了很多小块，在事件循环队列中一个接一个地执行，严格的说，和你的程序不直接相关的其他事件也可能会插入到队列中。

2. js中的函数具有原子性

3. Promise

3.1 Promise 至多只能有一个决议值（完成或拒绝）

如果你没有用任何值显式决议，那么这个值就是undefined,这是javaScript常见的处理方式。但是不管这个值是什么，无论当前或者未来，它都会被传给所有注册的（且适当的完成或拒绝）的回调。

还有一点需要清楚：如果使用多个参数调用resolve(..) 或者reject(..),第一个参数之后的所有参数都会被默默忽略。如果传递多个值，你就必须要把它们封装在单个值中传递，比如通过一个数组或者对象。

3.2 吞掉错误或异常

const p1 = new Promise(function (resolve,reject){
    throw new Error("error");
    resolve(1);
});
p1.then(function(value){
    console.log("a",value);
},function(err){
    console.log(err);
});
<!--输出-->

<!--Error: error-->
<!--    at eval (lifting.js?f706:37)-->
<!--    at new Promise (<anonymous>)-->
<!--    at eval (lifting.js?f706:36)-->
<!--    at Object.<anonymous> (bundle.js:233)-->
<!--    at __webpack_require__ (bundle.js:20)-->
<!--    at Object.<anonymous> (bundle.js:83)-->
<!--    at __webpack_require__ (bundle.js:20)-->
<!--    at bundle.js:63-->
<!--    at bundle.js:66-->
<!--lifting.js?f706:54 a 2-->
<!--lifting.js?f706:51 Error: error-->
<!--    at eval (lifting.js?f706:37)-->
<!--    at new Promise (<anonymous>)-->
<!--    at eval (lifting.js?f706:36)-->
<!--    at Object.<anonymous> (bundle.js:233)-->
<!--    at __webpack_require__ (bundle.js:20)-->
<!--    at Object.<anonymous> (bundle.js:83)-->
<!--    at __webpack_require__ (bundle.js:20)-->
<!--    at bundle.js:63-->
<!--    at bundle.js:66-->

LazyMan 实现

1.代码

function _LazyMan(name) {
    this.name = name;
    this.promises = [];
    var mfunc = () =>{
        console.log(`hello this is ${this.name}`);
        var p = Promise.resolve();
        return p 
    }
    this.promises.push(mfunc);
    var template = Promise.resolve();
    setTimeout(() => {
        this.promises.forEach(v =>{
            template = template.then(v);
        });
    }, 0)
}
_LazyMan.prototype = {
    sleep: function(time) {
        var pfunc = function() {
            var sp = new Promise(function(resolve, reject) {
                setTimeout(() => {
                    console.log(`暂停${time}s!`);
                    resolve();
                }, time * 1000);
            });
            return sp;
        }
        this.promises.push(pfunc);
        return this;
    },
    eat: function(food) {
        var epfunc = function() {
            console.log(`正在吃 ${food}`);
            var ep = Promise.resolve();
            return ep;
        }
        this.promises.push(epfunc);
        return this;
    }
}

function LazyMan(name) {
    return new _LazyMan(name);
}

LazyMan('yc').sleep(2).eat('shit').eat('peer').sleep(1).eat('shit').sleep('4').eat('banana');

如果不计较输出形式，在构造函数里面的for循环可以直接用 Promise.all()函数替代

2. 解析（大概意思可以看顶部手工图）

2.1 箭头函数

箭头函数是ES6 新推出的形式，值得注意的是在setTimeOut的函数中用到了this，如果是传统函数，这个this指向的是window，并不是_LazyMan，但是如果是箭头函数，this就是指向 _LazyMan

2.2 setTimeOut

setTimeOut函数并不会直接将回调函数放在事件循环队列中，而是等到定时器时间到了之后才会将函数放到事件循环队列中。正是基于setTimeOut函数的这种特性，所以在_LazyMan构造函数中用setTimeout()去获取promises中数组的数据，此时promises的数据是调用链中的所有Promise对象，如果不用setTimeout函数那么在构造函数中，语句顺序执行，promises里的对象只有构造函数中的一个Promise对象，链式调用函数中存入的Promise对象获取不到。

2.3 链式调用

return this :返回整个对象，就能实现链式调用。