René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"从一道面试题认识函数柯里化","articleBody":"最近在整理面试资源的时候，发现一道有意思的题目，所以就记录下来。 \r\n\r\n### 题目\r\n\r\n如何实现 multi(2)(3)(4)=24?\r\n\r\n首先来分析下这道题，实现一个 multi 函数并依次传入参数执行，得到最终的结果。通过题目很容易得到的结论是，把传入的参数相乘就能够得到需要的结果，也就是 2X3X4 = 24。\r\n\r\n### 简单的实现\r\n\r\n那么如何实现 multi 函数去计算出结果值呢？脑海中首先浮现的解决方案是，闭包。\r\n\r\n```javascript\r\nfunction multi(a) {\r\n    return function(b) {\r\n        return function(c) {\r\n            return a * b * c;\r\n        }\r\n    }\r\n}\r\n```\r\n\r\n利用闭包的原则，multi 函数执行的时候，返回 multi 函数中的内部函数，再次执行的时候其实执行的是这个内部函数，这个内部函数中接着又嵌套了一个内部函数，用于计算最终结果并返回。\r\n\r\n![闭包实现](https://user-images.githubusercontent.com/20440496/44616464-dce4d800-a882-11e8-94be-fb73f543fce4.png)\r\n\r\n单纯从题面来说，似乎是已经实现了想要的结果，但仔细一想就会发现存在问题。\r\n\r\n上面的实现方案存在的缺陷：\r\n\r\n* 代码不够优雅，实现步骤需要一层一层的嵌套函数。\r\n* 可扩展性差，假如是要实现 multi(2)(3)(4)...(n) 这样的功能，那就得嵌套 n 层函数。\r\n\r\n那么有没有更好的解决方案，答案是，使用函数式编程中的函数柯里化实现。\r\n\r\n### 函数柯里化\r\n\r\n在函数式编程中，函数是一等公民。那么函数柯里化是怎样的呢？\r\n\r\n函数柯里化指的是将能够接收多个参数的函数转化为接收单一参数的函数，并且返回接收余下参数且返回结果的新函数的技术。\r\n\r\n函数柯里化的主要作用和特点就是参数复用、提前返回和延迟执行。\r\n\r\n例如：封装兼容现代浏览器和 IE 浏览器的事件监听的方法，正常情况下封装是这样的。\r\n\r\n```javascript\r\nvar addEvent = function(el, type, fn, capture) {\r\n    if(window.addEventListener) {\r\n        el.addEventListener(type, function(e) {\r\n            fn.call(el, e);\r\n        }, capture);\r\n    }else {\r\n        el.attachEvent('on' + type, function(e) {\r\n            fn.call(el, e);\r\n        })\r\n    }\r\n}\r\n```\r\n\r\n该封装的方法存在的不足是，每次写监听事件的时候调用 addEvent 函数，都会进行 if else 的兼容性判断。事实上在代码中只需要执行一次兼容性判断就可以了，后续的事件监听就不需要再去判断兼容性了。那么怎么用函数柯里化优化这个封装函数。\r\n\r\n```javascript\r\nvar addEvent = (function() {\r\n    if(window.addEventListener) {\r\n        return function(el, type, fn, capture) {\r\n            el.addEventListener(type, function(e) {\r\n                fn.call(el, e);\r\n            }, capture);\r\n        }\r\n    }else {\r\n        return function(ele, type, fn) {\r\n            el.attachEvent('on' + type, function(e) {\r\n                fn.call(el, e);\r\n            })\r\n        }\r\n    }\r\n})()\r\n```\r\n\r\njs 引擎在执行该段代码的时候就会进行兼容性判断，并且返回需要使用的事件监听封装函数。这里使用了函数柯里化的两个特点：提前返回和延迟执行。\r\n\r\n柯里化另一个典型的应用场景就是 bind 函数的实现。使用了函数柯里化的两个特点：参数复用和提前返回。\r\n\r\n```javascript\r\nFunction.prototype.bind = function(){\r\n\tvar fn = this;\r\n\tvar args = Array.prototype.slice.call(arguments);\r\n\tvar context = args.shift();\r\n\r\n\treturn function(){\r\n\t\treturn fn.apply(context, args.concat(Array.prototype.slice.call(arguments)));\r\n\t};\r\n};\r\n```\r\n\r\n\r\n\r\n#### 柯里化的实现\r\n\r\n那么如何通过函数柯里化实现面试题的功能呢？\r\n\r\n#### 通用版\r\n\r\n```javascript\r\nfunction curry(fn) {\r\n    var args = Array.prototype.slice.call(arguments, 1);\r\n    return function() {\r\n\tvar newArgs = args.concat(Array.prototype.slice.call(arguments));\r\n        return fn.apply(this, newArgs);\r\n    }\r\n}\r\n```\r\n\r\ncurry 函数的第一个参数是要动态创建柯里化的函数，余下的参数存储在 args 变量中。\r\n\r\n执行 curry 函数返回的函数接收新的参数与 args 变量存储的参数合并，并把合并的参数传入给柯里化了的函数。\r\n\r\n```javascript\r\nfunction multiFn(a, b, c) {\r\n    return a * b * c;\r\n}\r\nvar multi = curry(multiFn);\r\nmulti(2,3,4);\r\n```\r\n\r\n结果：\r\n\r\n![image](https://user-images.githubusercontent.com/20440496/44618906-70350200-a8b1-11e8-8e0b-bd015b263630.png)\r\n\r\n虽然得到的结果是一样的，但是很容易发现存在问题，就是代码相对于之前的闭包实现方式较复杂，而且执行方式也不是题目要求的那样 multi(2)(3)(4)。那么下面就来改进这版代码。\r\n\r\n#### 改进版\r\n\r\n就题目而言，是需要执行三次函数调用，那么针对柯里化后的函数，如果传入的参数没有 3 个的话，就继续执行 curry 函数接收参数，如果参数达到 3 个，就执行柯里化了的函数。\r\n\r\n```javascript\r\nfunction curry(fn, args) {\r\n    var length = fn.length;\r\n    var args = args || [];\r\n    return function(){\r\n        newArgs = args.concat(Array.prototype.slice.call(arguments));\r\n        if(newArgs.length \u003c length){\r\n            return curry.call(this,fn,newArgs);\r\n        }else{\r\n            return fn.apply(this,newArgs);\r\n        }\r\n    }\r\n}\r\nfunction multiFn(a, b, c) {\r\n    return a * b * c;\r\n}\r\nvar multi = curry(multiFn);\r\nmulti(2)(3)(4);\r\nmulti(2,3,4);\r\nmulti(2)(3,4);\r\nmulti(2,3)(4);\r\n```\r\n\r\n![image](https://user-images.githubusercontent.com/20440496/44619592-f5251900-a8bb-11e8-89d7-95a9939b3eb7.png)\r\n\r\n可以看到，通过改进版的柯里化函数，已经将题目定的实现方式扩展到好几种了。这种实现方案的代码扩展性就比较强了，但是还是有点不足，就是必须事先知道求值的参数个数，那能不能让代码更灵活点，达到随意传参的效果，例如： multi(2)(3)(4)，multi(5)(6)(7)(8)(9) 这样的。\r\n\r\n#### 优化版\r\n\r\n```javascript\r\nfunction multi() {\r\n    var args = Array.prototype.slice.call(arguments);\r\n\tvar fn = function() {\r\n\t\tvar newArgs = args.concat(Array.prototype.slice.call(arguments));\r\n        return multi.apply(this, newArgs);\r\n    }\r\n    fn.toString = function() {\r\n        return args.reduce(function(a, b) {\r\n            return a * b;\r\n        })\r\n    }\r\n    return fn;\r\n}\r\n```\r\n\r\n![image](https://user-images.githubusercontent.com/20440496/44619613-5816b000-a8bc-11e8-88aa-098d968caf6a.png)\r\n\r\n这样的解决方案就可以灵活的使用了。不足的是返回值是 Function 类型。\r\n\r\n![image](https://user-images.githubusercontent.com/20440496/44619866-243c8a00-a8be-11e8-8ac5-2e00b7ea9bb4.png)\r\n\r\n\r\n\r\n### 总结\r\n\r\n* 就题目本身而言，是存在多种实现方式的，只要理解并充分利用闭包的强大。\r\n* 可能在实际应用场景中，很少使用函数柯里化的解决方案，但是了解认识函数柯里化对自身的提升还是有帮助的。\r\n* 理解闭包和函数柯里化之后，如果在面试中遇到类似的题型，应该就可以迎刃而解了。\r\n\r\n### 参考\r\n\r\n* https://segmentfault.com/q/1010000004014052\r\n* https://blog.csdn.net/crystal6918/article/details/77141741\r\n* [https://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==\u0026mid=2651228431\u0026idx=1\u0026sn=c9d62a30a52f4572cc0cb4aaf2a82ef3](https://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==\u0026mid=2651228431\u0026idx=1\u0026sn=c9d62a30a52f4572cc0cb4aaf2a82ef3)","author":{"url":"https://github.com/webproblem","@type":"Person","name":"webproblem"},"datePublished":"2018-08-26T13:52:04.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":10},"url":"https://github.com/4/Blog/issues/4"}