“回调函数”超难面试题!
发布在全栈开发工程师2018年10月9日view:223调试前端的畅想vue前端工程前端工程师NWweb网站安全
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

“回调函数”超难面试题!

“回调函数”超难面试题!

<script>
 let app = {
 ary: [],
 use(fn) {
 this.ary.push(fn);
 }
 };
 app.use((next) => {
 console.log(1);
 next();
 console.log(2)
 });
 app.use((next) => {
 console.log(3);
 next();
 console.log(4)
 });
 app.use((next) => {
 console.log(5);
 next();
 console.log(6)
 });
 callBack(0);
 function callBack(index) {
 if (index === app.ary.length)
 return;
 let newAry = app.ary[index];
 newAry(() => {
 callBack(index + 1);
 })
 }
</script>

进来的小伙伴可以先自己思考一下 对于还属于小白的我来说扫了一眼这些代码的反应是:“这都是啥?”

但是我也比较喜欢钻研~ 仔细看了第二眼的反应是:“这回调函数也太回调了吧!”

又看了第三眼差不多也理解了一星半点,写出解题逻辑的同时也让自己理解的更深刻一点

答案输出:1 3 5 6 4 2;

 app.use((next) => {
 console.log(1);
 next();
 console.log(2)
 });

这一步是让对象app里属性名为use的函数执行,里面的箭头函数作为fn的形参添加到ary空数组中;

以此类推后面两个方法执行里的实参同样作为fn的形参添加到ary数组当中;

callBack(0);
function callBack(index) {
 if (index === app.ary.length)
 return;
 let newAry = app.ary[index];
 newAry(() => {
 callBack(index + 1);
 })
}
函数callback执行传参0,判断不成立继续往下,let newAry = app.ayr[index],可以看成

let newAry = (next)=>{
console.log(1);
next();
console.log(2);
};

紧接着newAry执行里面的参数()=>{callBack(index+1)} 被形参next接收,代码执行 首先输出1

接下来是 next() 就等于传的参数()=>{callBack(index+1)} 执行,里面紧接着是 函数callBack执行;

此时index的参数计算后为 1 ;判断依旧不成立,继续往下执行;按前面原理经过计算后 *分别输出 3 5 *

最后(next) => { console.log(5); next(); console.log(6) }; 输出 5 之后;函数callBack执行此时里面的判断成立不再执行;

紧接着 *输出 6 * 由于上面的方法执行没有执行完,而且因为 newAry 执行回调函数的嵌套,所以需要再从里到外

执行再 *分别输出 4 2 *;所以最后 答案是:1 3 5 6 4 2; 本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。 对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。 最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论
发表评论
2个月前

这不就是中间件

WRITTEN BY
前端攻城小牛
你所谓的稳定不过是在浪费生命
TA的新浪微博
PUBLISHED IN
全栈开发工程师

往前端这条不归路再次迈进

我的收藏