两道关于JS的小考题(闭包与中间件)

题目一:写一个javascript函数 calculate,该函数有如下性质

1
2
3
calculate() = 0;
calculate(2)() = 2;
calculate(3)(4)(1)(5)() = 13;

即可以连续地链式调用,一旦碰到一次调用没有参数的,则返回前面所有参数的和。

其实题目本身并不算复杂,代码也非常简单,就是思路有点绕,可能要在电脑上反复试试调调才能写对,答案如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var calculate = (function () {
    var sum = 0;
    var func = function () {
        if (arguments.length === 0) {
            var ret = sum;
            sum = 0;
            return ret;
        }
        sum += arguments[0];
        return func;
    };
    return func;
})();
 
console.log(calculate()); // 输出0
console.log(calculate(100)()); // 输出100
console.log(calculate(1)(2)(3)(4)()); // 输出10

主要思路就是用闭包变量记录当前的结果,所写的函数一旦没有参数,就返回数字结果,一旦有一个参数,记录下当前的和,然后返回函数自己。

 

题目二:有一个JS函数,函数名为APP,它满足如下性质:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var func1 = function (next) {
    console.log('func1 begin');
    next();
    console.log('func1 end');
};
 
var func2 = function (next) {
    console.log('func2 begin');
    next();
    console.log('func2 end');
};
 
var func3 = function (next) {
    console.log('func3 begin');
    next();
    console.log('func3 end');
};
 
var a = new APP();
a.use(func1);
a.use(func2);
a.use(func3);
a.run();
 
// output:
// func1 begin
// func2 begin
// func3 begin
// func3 end
// func2 end
// func1 end

有点类似于中间件一样,APP实例化以后,可以用use方法注册一系列函数,并通过run方法依次把注册的函数跑一遍,注册的函数都接受一个next函数作为参数,一旦碰到next执行,则递归调用下一个注册函数。请写出APP这个函数的实现。

刚看到这个题目的时候有点蒙圈,感觉无从下笔,思考了很久以后发现……原来这么简单……自己把自己绕进去了。答案如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var APP = function() {
    this.stack = [];
};
APP.prototype.use = function (cb) {
    this.stack.push(cb);
};
APP.prototype.run = function() {
    var self = this;
 
    var next = function () {
        if(self.stack.length < 1) {
            return;
        }
        var cb = self.stack.shift();
        cb(next);
    };
    next();
};

 

posted on   Horstxu  阅读(568)  评论(0编辑  收藏  举报

编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示