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

<pre style="-webkit-tap-highlight-color: transparent; box-sizing: border-box; font-family: Consolas, Menlo, Courier, monospace; font-size: 16px; white-space: pre-wrap; position: relative; line-height: 1.5; color: rgb(153, 153, 153); margin: 1em 0px; padding: 12px 10px; background: rgb(244, 245, 246); border: 1px solid rgb(232, 232, 232);"><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>
Q群：864305860
</pre>

对于还属于小白的我来说扫了一眼这些代码的反应是：“这都是啥？”

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

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

答案输出：1 3 5 6 4 2；


<pre style="-webkit-tap-highlight-color: transparent; box-sizing: border-box; font-family: Consolas, Menlo, Courier, monospace; font-size: 16px; white-space: pre-wrap; position: relative; line-height: 1.5; color: rgb(153, 153, 153); margin: 1em 0px; padding: 12px 10px; background: rgb(244, 245, 246); border: 1px solid rgb(232, 232, 232);"> app.use((next) => {
 console.log(1);
 next();
 console.log(2)
 });
</pre>

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

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

<pre style="-webkit-tap-highlight-color: transparent; box-sizing: border-box; font-family: Consolas, Menlo, Courier, monospace; font-size: 16px; white-space: pre-wrap; position: relative; line-height: 1.5; color: rgb(153, 153, 153); margin: 1em 0px; padding: 12px 10px; background: rgb(244, 245, 246); border: 1px solid rgb(232, 232, 232);">callBack(0);
function callBack(index) {
 if (index === app.ary.length)
 return;
 let newAry = app.ary[index];
 newAry(() => {
 callBack(index + 1);
 })
}
</pre>

函数callback执行传参0，判断不成立继续往下，let newAry = app.ayr[index]，可以看成

<pre style="-webkit-tap-highlight-color: transparent; box-sizing: border-box; font-family: Consolas, Menlo, Courier, monospace; font-size: 16px; white-space: pre-wrap; position: relative; line-height: 1.5; color: rgb(153, 153, 153); margin: 1em 0px; padding: 12px 10px; background: rgb(244, 245, 246); border: 1px solid rgb(232, 232, 232);">let newAry = (next)=>{
console.log(1);
next();
console.log(2);
};
</pre>

紧接着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，快速升职加薪，走上人生巅峰。

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

猜你喜欢