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

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

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

js常用方法大全_前端常用Js函数封装

这是我在实际开发中常用的一些Js函数方法,今天总结了一下,以便以后查询,有需要的小伙伴可以参考下。包括:加载js || css || style、获取url参数、本地存储、cookie操作【set,get,del】、Js获取元素样式【支持内联】

js函数内部两个特殊的对象之arguments和this

arguments是一个类数组对象。包含着传入函数中的所有参数。但这个对象还有一个名叫callee的属性,该属性是一个指针,指向拥有这个arguments对象的函数。this引用的是函数执行的环境对象(当在网页的全局作用域中调用函数时,this对象引用的就是window)

8个CSS函数的小技巧

CSS现在已经能实现比网站开发者预料到的更多的功能,并且随着时间的推移,样式表语言越来越强大,能实现许多原先需要依靠JavaScript才能实现的功能。在这篇文章中我们将会介绍CSS函数中8种有用的小技巧。

js工厂函数创建对象与对象构造函数的理解

工厂函数,顾名思义,就是通过一个"工厂的加工" 来创建一个函数,这种操作在需要创建多个相似对象时可以有效地减少重复代码,但是这样有个缺点就是

nodejs如何调用函数?

NodeJs中调用函数的方式有多种,可以在内部调用普通函数,还可以调用外部单个函数以及调用外部多个函数等。普通内部函数可以直接调用,外部函数需要先使用module.exports=fun将函数导出,然后就可以直接调用了。

如何实现 lodash.get 函数及可选链操作简化取值

lodash 基本上成为了 js 项目的标配工具函数,广泛应用在各种服务端以及前端应用中,但是它的包体积略大了一些。对于服务端来说,包的体积并不是十分的重要,或者换句话说,不像前端那样对包的体积特别敏感,一分一毫都会影响页面打开的性能,从而影响用户体验。

js函数、作用域、声明提前、arguments对象

函数的定义:用来执行某些特定功能的代码,为了减少重复使用代码,需要的时候直接调用。函数名:根据功能来自己定义的名称;参数:传入函数内的变量;这里的参数是形参(形式参数),可以给形参赋值

JS函数的三种方式

函数,一段能够自动完成某些功能的代码块,函数的出现,既解决了重复使用重一功能的需求,又可以避免代码的臃肿性。使用函数有两个要求:必须调用后才可以执行;函数名不要和关键字以及系统函数相同;

JS常用函数原理的实现

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

引用类型作为函数参数何解

在向函数传递引用类型的参数时,相当于把引用类型的地址复制给函数内的一个局部变量,所以局部变量和传入的参数会指向内存中的同一个对象。 局部变量的变化也会映射到传入参数

点击更多...

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