面试

说在前面

　　说实话，刚开始在听到这个面试题的时候，我是诧异的，红绿灯？这不是单片机、FPGA、F28335、PLC的实验吗？！

　　而且还要用Promise去写，当时我确实没思路，只好硬着头皮去写，下来再review的时候，才真正懂了Promise红绿灯的实现原理

　　下来我就由浅至深的分析Promise红绿灯的实现原理

　　下面我就不讲promise的原理和特点了，想具体看了解的可以看阮一峰老师的教程

　　主要说下红绿灯用到promise最核心的一点就是  “promise实例的状态变为Resolved，就会触发then方法绑定的回调函数”

　　我是在做这个demo途中才彻底理解了这句话的真正含义。

简单实现

　　用文字绿灯、黄灯、红灯来模拟表示红绿灯

function timeout(){    return new Promise(function(resolve,reject){        setTimeout(resolve,1000,"绿灯");

}function timeout2(){    return new Promise(function(resolve,reject){        setTimeout(resolve,2000,"黄灯");    })}function timeout3(){    return new Promise(function(resolve,reject){        setTimeout(resolve,3000,"红灯");    })}(function restart(){    timeout().then((value)=>{        console.log(value);    })    timeout2().then((value)=>{        console.log(value);    })    timeout3().then((value)=>{        console.log(value);        restart();    })})()

　　建立三个promise对象，分别用timeout1 timeout2 timeout3 包起来，promise对象里面含有定时器setTimeout，以连续的1000-》2000-》3000的时间表示每次灯亮的时间的为1秒

　　下面是实现的demo效果

　　这种实现有一个问题，如果设定绿灯是5000ms，黄灯是2000ms，红灯是3000ms，
　　则会出现先显示黄灯，后显示红灯，显示绿灯的同时也会同时显示黄灯，
　　因为第二轮绿灯的5000ms包含了黄灯的2000ms
　　这就不符合红绿灯的思想与逻辑

较复杂实现

　　针对上一个问题，所以有了第二种解决方案

function green(){    return new Promise(function(resolve,reject){        console.log("绿灯"+new Date().getSeconds())        resolve();    })}function yellow(){    return new Promise(function(resolve,reject){        console.log("黄灯"+new Date().getSeconds())        resolve();    })}function red(){    return new Promise(function(resolve,reject){        console.log("红灯"+new Date().getSeconds())        resolve();    })}function ms_5000(){    return new Promise(function(resolve,reject){        setTimeout(resolve,5000)    })}function ms_3000(){    return new Promise(function(resolve,reject){        setTimeout(resolve,3000)    })}function ms_2000(){    return new Promise(function(resolve,reject){        setTimeout(resolve,2000)    })}(function restart(){     green()    .then(ms_5000) //绿灯显示5s转红灯    .then(yellow)         .then(ms_3000) //黄灯显示3s转红灯    .then(red)    .then(ms_2000) //红灯显示2s转绿灯
    .then(arguments.callee)
 })()

　　建立三个promise对象 分别用green yellow red  函数包起来，并返回promise对象的resolve，promise对象的状态变成Resolved 也就是说return了reslove就可以可以触发then方法绑定的回调函数

　　又建立了三个定时器，用于延时，三个定时器中用到了resolve函数，resolve是js引擎自带的函数，也表示promise的状态变成了Resolved，可以触发then方法绑定的回调函数。

　　实现的demo如下，demo的数字是时间戳，当前的秒数，绿灯55 黄灯0    表示绿灯执行5秒后转到黄灯，下面的同理

　　但是这样做还是有点麻烦，代码复用率低，要建立3个promise对象，3个定时器，无疑是消耗内存的。

　　倒数第2行 arguments.callee的含义下面也会解释。

　　

 

较复杂实现（理理思路）

function green(){    return new Promise(function(resolve,reject){        console.log("绿灯当前秒数"+new Date().getSeconds())        resolve();    })}(function restart(){     green().then(function(){         return new Promise(function(resolve,reject){             setTimeout(resolve,5000);         })     }).then(function(){         return new Promise(function(resolve,reject){            console.log("黄灯当前秒数" + new Date().getSeconds())            resolve();        })         }).then(function(){         return new Promise(function(resolve,reject){             setTimeout(resolve,3000);         })     }).then(function(){         return new Promise(function(resolve,reject){            console.log("绿灯当前秒数"+ new Date().getSeconds())            resolve();        })     }).then(function(){         return new Promise(function(resolve,reject){             setTimeout(resolve,2000)         })     }).then(arguments.callee);})()

　　上述的代码功能和第2点相同，只是为了理理思路，体现出promise的状态变成Resolved时，可以触发then方法绑定的回调函数

　　就像上述代码所示，执行红绿灯的显示，每次都会返回resolve，或者定时器也会使用resolve函数，表示promise的状态确实变成Resolved了。promise有三种状态pending fullfilled rejected ,pending到fulfilled表示的就是Resolved。

　　demo如下

　　

完美实现（实现架构）

　　正如上面所说，上述的方法要建立3个promise对象，代码复用率低，那有没有更加严(gao)格(duan)的的方法，答案是有的，但是在看写代码前需要理理思路，分析一下代码的架构如何去写

function green2yellow2red(){        return function(){                           // someCode            return new Promise(function(){             // someCode                       })                }}var green = green2red2yellow(setTimeout).bind(null, 3000);var yellow = green2red2yellow(setTimeout).bind(null, 4000);var red = green2red2yellow(setTimeout).bind(null, 5000);(function(){    // IIFE    green()})()

　　上述代码使用一个promise对象，用green2yellow2red函数包起来，有两个return，第一个return是为了给第二个return的promise对象bind延迟时间，bind绑定的参数可以通过arguments访问到，必须是第一个return的函数中的arguments，arguments是什么下面也会讲。

　　下面打印好多参数，下面我详细解释一下他们的区别

function green2red2yellow(){    console.log(arguments)        // [ƒ, callee: ƒ, Symbol(Symbol.iterator): ƒ]        // [ƒ, callee: ƒ, Symbol(Symbol.iterator): ƒ]        // [ƒ, callee: ƒ, Symbol(Symbol.iterator): ƒ]    console.log(this);        // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}        // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}        // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}        return function(){            console.log(arguments)            // [3000, callee: ƒ, Symbol(Symbol.iterator): ƒ]            console.log(this);            // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}              console.log(arguments.callee.length)            // 形参的个数             console.log(arguments.length)            // 实参的个数             var arr = [];            var arr2 =[].slice.call(arguments); //把arguments类数组转成真数组            console.log(arguments[0])  //3000 type是Number            console.log(arr.push(arguments)) //返回1表示当前代码执行结果为真            console.log(arr); //[Arguments(1)]            console.log(arr2) //  [3000]  type是Array                return new Promise(function(){                    console.log(arguments)                    // （2）[ƒ, ƒ, callee: ƒ, Symbol(Symbol.iterator): ƒ]                    // 实参的类数组                })                }}var green = green2red2yellow(setTimeout).bind(null, 3000);var yellow = green2red2yellow(setTimeout).bind(null, 4000);var red = green2red2yellow(setTimeout).bind(null, 5000);(function(){    // IIFE    green()})()//测试代码段var promise = new Promise(function(){    console.log(arguments)    // （2）[ƒ, ƒ, callee: ƒ, Symbol(Symbol.iterator): ƒ]})

　　在green2red2yellow函数中直接console.log(arguments)，打印出来三个数组，是因为实例了三次promise对象，分别是green，yellow，red，三次都指向同一个对象，所以打印了三次。

　　在green2red2yellow函数中的第一个return中console.log(arguments)，只打印在IIFE中执行的的promise对象，就是green对象

　　在green2red2yellow函数中的第二个return中console.log(arguments)，显示结果前面有一个2表示，实参的个数是2

　　在测试代码段中测试了一下，确实是。

　　arguments：以类数组的方式存放着当前对象的实参。green2red2yellow函数中访问是green2red2yellow这个函数对象，green2red2yellow函数中第一个return中访问是return的function  bind了参数的的对象，green2red2yellow函数中第二个return是promise对象

　　arguments.callee：正在执行的这个函数的引用

　　arguments.callee.length：当前对象形参的个数

　　arguments.length：当前对象实参的个数

　　如何把arguments这个类数组转换成数组呢：[ ].slice.call(arguments) 这是最稳妥的方法

　　下面的使用两种方式把arguments转成数组及两者的区别

　　　　　　  var arr = [];            var arr2 =[].slice.call(arguments); //把arguments类数组转成真数组            console.log(arguments[0])  //3000 type是Number            console.log(arr.push(arguments)) //返回1表示当前代码执行结果为真            console.log(arr); //[Arguments(1)]            console.log(arr2) //  [3000]  type是Array

　　

　　由此可知 [ ].slice.call(arguments)是最稳妥的方式

完美实现

 　　下面写出我觉得最完美的的实现方式

　　html：

    <ul id="traffic" class="">      <li id="green"></li>      <li id="yellow"></li>      <li id="red"></li>    </ul>

　　css：

/*垂直居中*/ul {position: absolute;width: 200px;height: 200px;top: 50%;left: 50%;transform: translate(-50%,-50%);}/*画3个圆代表红绿灯*/ul >li {width: 40px;height: 40px;border-radius:50%;opacity: 0.2;display: inline-block;}/*执行时改变透明度*/ul.red >#red, ul.green >#green,ul.yellow >#yellow{opacity: 1.0;}/*红绿灯的三个颜色*/#red {background: red;}#yellow {background: yellow;}#green {background: green;}

　　JS：

function green2red2yellow(timer){        return function(){             var arr = [].slice.apply(arguments)            // var self = this;                return new Promise(function(resolve,reject){                    arr.unshift(resolve)                    timer.apply(self,arr);                    })                }}
var green = green2red2yellow(setTimeout).bind(null, 3000);var yellow = green2red2yellow(setTimeout).bind(null, 4000);var red = green2red2yellow(setTimeout).bind(null, 5000);var traffic = document.getElementById("traffic");
(function restart(){    'use strict'                     //严格模式    console.log("绿灯"+new Date().getSeconds())  //绿灯执行三秒     traffic.className = 'green';        green()    .then(function(){        console.log("黄灯"+new Date().getSeconds())  //黄灯执行四秒        traffic.className = 'yellow';        return yellow();    })    .then(function(){        console.log("红灯"+new Date().getSeconds())   //红灯执行五秒        traffic.className = 'red';        return red();    }).then(function(){        restart()    })})();

1、var arr = [].slice.apply(arguments)  
表示把arguments转成数组

2、arr.unshift(resolve)
unshift或shift 在数组首项插入某值或删除首项  push pop 是在数组尾部操作

3、timer.apply(self,arr);　　　　　　　　
timer是形参，引用了定时器setTimeout，apply是改变this的指向并可以数组的形式传入参数作为
定时器执行的形参，定时器this的指向为self
self就是this就是window，等价于 timer(arr[0],arr[1]);

4、'use strict'                       
 严格模式，在严格模式下  arguments.callee（正在执行的这个函数的引用）无效

5、restart() 
递归

6、promise的状态变成Resolved，就会触发then绑定的回调函数，
所以每次then都是return一个promsise对象，因为在promise对象中状态变成了Resolved

下面是实现的demo
　　　　
注意：立即执行函数的script要写入body里面，否则会显示dom操作获得元素为null，我刚踩到这个坑了...

总结

　　这个问题的解决让我重新认识了promise，又重新认识了arguments，又重新认识了JS的强大。

　　红绿灯大战后，promise开发的最佳实践是怎样的？

　　前端要给力之：红绿灯大战中的火星生命-Promise

　　ECMAScript 6 入门（阮一峰）