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

时间: 2018-10-11阅读: 1182标签: 函数
<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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

浅谈async函数await用法

async和await相信大家应该不陌生,让异步处理变得更友好。其实这玩意儿就是个Generator的语法糖,想深入学习得去看看Generator,不然你可能只停留在会用的阶段。用法很简单,看代码吧。

实现一个JS深拷贝函数

JS深拷贝概念并不新鲜,但是真正要真正理解原理还是有点难度的。这也是JS语言精粹之一吧。因为JS对于对象的赋值使用的是浅拷贝,其中一个实例变量的赋值会影响到所有指向该对象的变量

深入理解JavaScript函数

两种定义形式: 通过函数定义表达式来定义,通过函数声明语句来定义。tips:以表达式方式定义的函数(特别适合用来定义那些只会用到一次的函数),函数名是可选的

js中sort函数用法总结_sort排序算法原理

js中sort方法用于对数组的元素进行排序,并返回数组。默认排序顺序是根据字符串Unicode码点。如果要得到自己想要的结果,不管是升序还是降序,就需要提供比较函数了。该函数比较两个值的大小,然后返回一个用于说明这两个值的相对顺序的数字

JavaScript中的高阶函数

在 JavaScript 的学习过程中,我们可能或多或少地接触过高阶函数。那么,我们自己对此是否有一个明确的定义,或者说很熟练的掌握这些用法呢

eval到底哪里不好?

为什么要少用eval?eval是 js 中一个强大的方法。都说eval == evil等于true,这篇文章将研讨eval的几个缺点和使用注意事项。

用 await/async 正确链接Js中的多个函数

在我完成 electrade 的工作之余,还帮助一个朋友的团队完成了他们的项目。最近,我们希望为这个项目构建一个 Craiglist 风格的匿名电子邮件中继,其中包含 “serverless” Google Firebase Function

Javascript中函数作为对象的魅力

Javascript中函数作为对象的魅力Javascript赋予了函数非常多的特性,其中最重要的特性之一就是将函数作为第一型的对象。那就意味着在javascript中函数可以有属性,可以有方法, 可以享有所有对象所拥有的特性。并且最重要的,她还可以直接被调用

Js中函数的5个高级技巧

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

Vue 中的 computed 和 methods 的使用

computed:在computed中的函数,是在dom加载后马上执行的;methods:在methods中的函数,必须要有一定的触发条件,才会执行 ,Vue.js 将绑定表达式限制为一个表达式,如果想要实现绑定多于一个表达式的逻辑

点击更多...

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