搞懂這道題，以後遇到回調深坑的面試不要慌

接上一篇文章 javascript奇葩面試題（四），我們來看接下來的一個問題：

let app = {
 ary: [],
 use:function(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 cb = app.ary[index];
 cb(() => {
 callBack(index + 1);
 })
}

上面這段代碼的輸出結果是什麼？

這道題初看起來不咋地，但是細看一下，感覺掉入了一堆回調中，這時不要慌，來細細分析一下：

1. 代碼連續三個 app.use 的執行結果是什麼？

它實際上是向 app.ary中push了三個回調函數，我可以用下面一種形式形象地表達這三個回調函數的位置關係，和他們執行的內容：

[
 /*這是第一個回調函數,它被回調時先輸出1，然後在調 next 回調，然後再輸出2 */
 [log1,next,log2], // 將其命名為CB1
 /*這是第二個回調函數,它被回調時先輸出3，然後在調 next 回調，然後再輸出4 */
 [log3,next,log4], // 將其命名為CB2
 /*這是第三個回調函數,它被回調時先輸出5，然後在調 next 回調，然後再輸出6 */
 [log5,next,log6] // 將其命名為CB3
]

再看：

callBack(0);
function callBack(index) {
 if (index === app.ary.length)
 return;
 let cb = app.ary[index];
 cb(() => {
 callBack(index + 1);
})

顯然，這個callBack(0)是整個程序調用的入口

當callBack函數執行到

 let cb = app.ary[index];

時，此時 index == 0 , cb == CB1,接下來執行cb這個函數，傳入了一個箭頭函數作為參數

cb(() => {
 callBack(index + 1);
})

到這裡，要搞清楚一點，上面的CB1,CB2,CB3中的next 也就是 這兒的 callBack函數了，只是每次在執行的時候 index 增加了1 ，那麼程序執行的整體流程如下：

執行CB1 => log1 =>執行CB2=>log3=>執行CB3=>log5=>log6=>跳回繼續執行CB2=>log4 =>跳回繼續執行CB1=>log2

所以，結果如下： 1 3 5 6 4 2

如果你還是理解得很清楚，我建議最好是把代碼複製到瀏覽器下面一步步地Debug，看看它執行的流程，你應該會豁然開朗. 今天就到這裡吧！

PS:如果這篇文章讓你學到了一點知識，歡迎點贊並關注我哦，每天一點技術乾貨，讓我陪你在大牛的路上越走越遠！！！