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

时间: 2018-10-11阅读: 1850标签: 函数
<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


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

js类的constructor中不支持异步函数吗?

如果是普通函数,可以用async 和await来解决你的问题。但你这个是在constructor里,constructor 的作用是返回一个对像实例,如果加了async就变成返回一个promise了,所以这个方法行不通

ES6 Array.find()和findIndex()函数用法

ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。

JavaScript函数内部属性

函数内部有两个特殊对象,this、arguments,其中arguments是一个类数组对象,包含着传入函数中的所有参数,主要用来保存函数参数。arguments对象还有一个callee属性,callee是一个指针,指向拥有这个arguments对象的函数。

a标签调用js函数写法总结

这是常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。

JS异常函数之箭头函数

在JS中,箭头函数可以像普通函数一样以多种方式使用。但是,它们一般用于需要匿名函数表达式,例如回调函数。下面示例显示举例箭头函数作为回调函数,尤其是对于map(), filter(), reduce(), sort()等数组方法。

10个实用的工具函数

生成一周时间:new Array 创建的数组只是添加了length属性,并没有实际的内容。通过扩展后,变为可用数组用于循环;判断核心使用Object.prototype.toString,这种方式可以准确的判断数据类型。

Js中函数的5个高级技巧

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。函数对任何一门语言来说都是一个核心的概念,在javascript中更是如此。本文将深入介绍函数的5个高级技巧。

Generator函数的语法和应用

状态机,封装了多个内部状态;返回一个遍历器对象,通过改对象可以一次遍历Generator函数内部的每一个状态;带*号,yeild表达式定义不同的内部状态;调用 Generator 函数后,该函数并不执行,返回的也不是函数运行结果

JS常用函数原理的实现

本文针对目前常见的面试题,实现了相应方法的核心原理,部分边界细节未处理。后续也会持续更新,希望对你有所帮助。实现一个call函数;实现一个apply函数

js在excel的编写_excel支持使用JavaScript自定义函数编写

微软 称excel就实现面向开发者的功能,也就是说我们不仅可以全新定义的公式,还可以重新定义excel的内置函数,现在Excel自定义函数增加了使用 JavaScript 编写的支持,下面就简单介绍下如何使用js来编写excel自定义函数。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!