<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；

来源：http://www.cnblogs.com/wumi/p/9733867.html

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/1137