简略图（徒手画略丑）
闲逛的时候发现了一道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 :返回整个对象，就能实现链式调用。
