2020-9-3 js 柯里化 的理解和实现

164 阅读1分钟

从一道题认识 柯里化Currying

//实现如下效果:
add(1)(2) // 输出 3
add(1, 2, 3)(10) // 输出 16
add(1)(2)(3)(4)(5) // 输出 15

柯里化 是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术(摘自wiki)

简言之,多参数 => 单参数 (其实不太准确)

那么,柯里化有什么用呢?

主要是 参数复用 ,lodash库里已经有封装好的柯里化函数


虽然lodash里已经有封装好的柯里化函数,但是我们还是要理解大致是怎样实现的

手写一个简版柯里化函数(代码来自[1]),加了一些注释增加可读性:

		function log(content) {
            console.log('%c          ', 'color:white;background:gray', content)
        }
        function f1(a, b, c) {
            return a + b + c//一个普通的返回三个数字相加结果的函数
        }

		function createCurry(func, args) {
            var paramNum = func.length;
            //function.length => 柯里化的函数的形参数量
            var args = args || [];
            //args是用来接收柯里化后函数的传参,相当于把参数存储在里面
            log(arguments)
            return function () {
                var _args = [...arguments]
                // var _args = [].slice.call(arguments);
                //arguments是伪数组,这步是把arguments转化成一个真数组
                //注意这里的arguments是返回的function的参数,不是createCurry的参数
                _args = [..._args,...args]
                // [].push.apply(_args, args);//把args push进_args里

                // 如果参数个数小于最初的func.length,则递归调用,继续收集参数,存在args里
                log(_args)
                log(`_args的参数长度:${_args.length}`)
                if (_args.length < paramNum) {
                    //this是Window
                    return createCurry.call(this, func, _args);
                }

                // 参数收集完毕,则执行func
                //this是Window
                return func.apply(this, _args);
            }
        }
        let f2 = createCurry(f1)	//1
        log('========================')
        let f3 = f2(10)		//2
        log('------------------------')
        log(f3(5)(6))	//3

食用方法:1,2,3分开运行查看结果。


参考: 这波能反杀 前端基础进阶(十):深入详解函数的柯里化 [1]