本文摘自PHP中文网,作者青灯夜游,侵删。
相关推荐:《javascript视频教程》
最近在社区阅读技术博客的时候偶然间看到了函数柯里化几个字,还有要求手写js函数柯里化,心想是柯里化是什么高级的东西?没听说过啊?
就带着问题出发,专门去学习了一下,做了一些整理。
什么是函数柯里化?
什么是函数柯里化?先看看维基百科如何解释:
在计算机科学中,柯里化(英语:Currying),又译为卡瑞化或加里化,是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。这个技术由克里斯托弗?斯特雷奇以逻辑学家哈斯凯尔?加里命名的,尽管它是Moses Sch?nfinkel和戈特洛布?弗雷格发明的。
在直觉上,柯里化声称“如果你固定某些参数,你将得到接受余下参数的一个函数”。所以对于有两个变量的函y^x,如果固定了y=2,则得到有一个变量的函数2^x。
Currying的概念其实并不复杂,用通俗易懂的话说:只传递给函数一部分参数来调用它,让它返回一个函数去处理剩下的参数。
如果文字解释还是有一点抽象,我们就拿add函数,来做一个简单的函数柯里化的实现。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | function add(x, y) {
return x + y
}
var curryingAdd = function (x) {
return function (y) {
return x + y;
};
};
var increment = curryingAdd(1);
var addTen = curryingAdd(10);
increment(2);
addTen(2);
|
实际上就是把add函数的x,y两个参数变成了先用一个函数接收x然后返回一个函数去处理y参数。现在思路应该就比较清晰了,就是只传递给函数一部分参数来调用它,让它返回一个函数去处理剩下的参数。
为什么要函数柯里化?
看完上面的关于add函数的柯里化,问题来了,费这么大劲封装一层,到底有什么用处呢?
一、参数复用
其实刚刚第一个add函数的柯里化例子中已经涉及到了函数柯里化所带来的函数复用的便捷,我们通过add函数柯里化,很快捷地实现了increment函数和addTen函数,再来看个例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | function check(reg, txt) {
return reg.test(txt)
}
check(/\d+/g, 'test' )
check(/[a-z]+/g, 'test' )
function curryingCheck(reg) {
return function (txt) {
return reg.test(txt)
}
}
var hasNumber = curryingCheck(/\d+/g)
var hasLetter = curryingCheck(/[a-z]+/g)
hasNumber( 'test1' )
hasNumber( 'testtest' )
hasLetter( '21212' )
|
上面的示例是一个正则的校验,正常来说直接调用check函数就可以了,但是如果我有很多地方都要校验是否有数字,其实就是需要将第一个参数reg进行复用,这样别的地方就能够直接调用hasNumber,hasLetter等函数,让参数能够复用,调用起来也更方便。
二、提前确认
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 | var on = function (element, event, handler) {
if (document.addEventListener) {
if (element && event && handler) {
element.addEventListener(event, handler, false);
}
} else {
if (element && event && handler) {
element.attachEvent( 'on' + event, handler);
}
}
}
var on = ( function () {
if (document.addEventListener) {
return function (element, event, handler) {
if (element && event && handler) {
element.addEventListener(event, handler, false);
}
};
} else {
return function (element, event, handler) {
if (element && event && handler) {
element.attachEvent( 'on' + event, handler);
}
};
}
})();
|
换一种写法可能比较好理解一点,上面就是把isSupport这个参数给先确定下来了
1 2 3 4 5 6 7 8 | var on = function (isSupport, element, event, handler) {
isSupport = isSupport || document.addEventListener;
if (isSupport) {
return element.addEventListener(event, handler, false);
} else {
return element.attachEvent( 'on' + event, handler);
}
}
|
我们在做项目的过程中,封装一些dom操作可以说再常见不过,上面第一种写法也是比较常见,但是我们看看第二种写法,它相对一第一种写法就是自执行然后返回一个新的函数,这样其实就是提前确定了会走哪一个方法,避免每次都进行判断。
三、延迟计算/运行
1 2 3 4 5 6 7 8 | Function.prototype.bind = function (context) {
var _this = this
var args = Array.prototype.slice.call(arguments, 1)
return function () {
return _this.apply(context, args)
}
}
|
像我们js中经常使用的bind,实现的机制就是Currying.
如何实现函数柯里化?
通用的封装方法:
1 2 3 4 5 6 7 8 9 10 11 | var currying = function (fn) {
var args = Array.prototype.slice.call(arguments, 1)
return function () {
var newArgs = args.concat(Array.prototype.slice.call(arguments))
return fn.apply(this, newArgs)
}
}
|
这边首先是初步封装,通过闭包把初步参数给保存下来,然后通过获取剩下的arguments进行拼接,最后执行需要currying的函数。
但是上面的函数还是有些缺陷,这样返回的话其实只能多扩展一个参数,currying(a)(b)(c)这样的话,貌似就不支持了(不支持多参数调用),一般这种情况都会想到使用递归再进行封装一层。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | function progressCurrying(fn, args) {
var _this = this
var len = fn.length;
var args = args || [];
return function () {
var _args = Array.prototype.slice.call(arguments);
Array.prototype.push.apply(args, _args);
if (_args.length < len) {
return progressCurrying.call(_this, fn, _args);
}
return fn.apply(this, _args);
}
}
|
这边其实是在初步的基础上,加上了递归的调用,只要参数个数小于最初的fn.length,就会继续执行递归。
函数柯里化的性能怎么样?
关于Currying的性能,我们应该知道下面几点:
- 存取arguments对象通常要比存取命名参数要慢一点
- 一些老版本的浏览器在arguments.length的实现上是相当慢的
- 使用fn.apply( … ) 和 fn.call( … )通常比直接调用fn( … ) 稍微慢点
- 创建大量嵌套作用域和闭包函数会带来花销,无论是在内存还是速度上
其实在大部分应用中,主要的性能瓶颈是在操作DOM节点上,这js的性能损耗基本是可以忽略不计的,所以curry是可以直接放心的使用。
柯里化面试题
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 | add(1)(2)(3) = 6;
add(1, 2, 3)(4) = 10;
add(1)(2)(3)(4)(5) = 15;
function add() {
var _args = Array.prototype.slice.call(arguments);
var _adder = function () {
_args.push(…arguments);
return _adder;
};
_adder.toString = function () {
return _args.reduce( function (a, b) {
return a + b;
});
}
return _adder;
}
add(1)(2)(3)
add(1, 2, 3)(4)
add(1)(2)(3)(4)(5)
add(2, 6)(1)
|
总结
通过简单地传递几个参数,就能动态创建实用的新函数;而且还能带来一个额外好处,那就是保留了数学的函数定义,尽管参数不止一个。
Currying函数用起来非常得心应手,每天使用它对我来说简直就是一种享受。它堪称手头必备工具,能够让函数式编程不那么繁琐和沉闷。
更多编程相关知识,请访问:编程入门!!
以上就是详解JavaScript中的函数柯理化的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript的方法是函数吗
ie浏览器不支持javascript怎么办
什么是javascript引擎
javascript对象怎么转换成字符串
javascript是什么技术
javascript怎么将数组转为json格式
javascript如何换行
js的闭包与定时器
javascript是什么
javascript对象迭代方法和性能的比较
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 详解JavaScript中的函数柯理化