「回調函數」超難面試題！

進來的小夥伴可以先自己思考一下

對於還屬於小白的我來說掃了一眼這些代碼的反應是：“這都是啥？”

但是我也比較喜歡鑽研~ 仔細看了第二眼的反應是：“這回調函數也太回調了吧！”

又看了第三眼差不多也理解了一星半點，寫出解題邏輯的同時也讓自己理解的更深刻一點

答案輸出：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；

這些技術如何學習，有沒有免費資料？

對前端的技術，架構技術感興趣的同學關注我的頭條號，並在後臺私信發送關鍵字：“前端”即可獲取免費的架構師學習資料

知識體系已整理好，歡迎免費領取。還有面試視頻分享可以免費獲取。關注我，可以獲得沒有的架構經驗哦！！

閱讀更多 前端攻城小牛 的文章

關鍵字: 輸出 面試題 技術