前端闭包题目——柯里化实现不限个数计算累加和
程序员文章站
2021-12-07 08:21:56
起初是朋友问我的一个题目,一起研究好一会var add = function (x) { var sum = 1; var tmp = function (x) { sum = sum + x; console.log(sum, 'sum1') return tmp; } console.log(sum, 'sum2...
起初是朋友问我的一个题目,一起研究好一会
var add = function (x) {
var sum = 1;
var tmp = function (x) {
sum = sum + x;
console.log(sum, 'sum1')
return tmp;
}
console.log(sum, 'sum2')
console.log(tmp, 'tmp1')
tmp.toString = function () {
return sum;
}
console.log(sum, 'sum3')
console.log(tmp, 'tmp2')
return tmp;
}
console.log( add(1)(2)(3)(4) );
问: 控制台输出内容是什么?
结果:
为什么?怎么运行的?
在解决这些问题之前,我先要为自己解释一些基础问题。
- 先搞清楚
add(1)(2)(3)(4)
,当一个函数里有多个形参的时候,就这样给它传入多个实参。 -
foo.toString
函数被重写,会在每一次打印foo的时候都调用一次,且会由于闭包将返回的内容放在全局的作用域链上。 - 柯里化: 把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。
经典举例:
// 普通的add函数 function add(x, y) { return x + y } // Currying后 function curryingAdd(x) { return function (y) { return x + y } } add(1, 2) // 3 curryingAdd(1)(2) // 3
这个题目就是利用柯里化完成的不限个数的数字累加。
知道了这些再来看这道题,就相对容易理解了。
先来梳理运行顺序:add()
--> tmp()
--> tmp()
--> tmp()
第一轮运行add函数(此时tmp并没有运行),程序走到return,返回的是tmp函数,于是第二轮运行tmp函数,由于tmp函数返回的是自己,并且add(1)(2)(3)(4)调用还没有结束,所以第三轮还是运行tmp,第四轮运行还是tmp。
打印台输出:
第一轮输出sum2是1,tmp1是tmp函数本身,sum3是1,tmp2是fn返回1;第二轮输出sum1是3;第三轮输出sum1是6,第四轮输出sum1是10,函数返回10;
一通翻阅资料加上自我理解总结以上,如有不准确之处欢迎大佬们指正,如果有帮助到您也请多多点赞和评论呀~我是前端小桃,我在这里成长。
本文地址:https://blog.csdn.net/megamind0430/article/details/110168679
下一篇: SI切换到VSCode的使用技巧