浅析 JavaScript 中的 函数 uncurrying 反柯里化
柯里化
柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果。
因此柯里化的过程是逐步传参,逐步缩小函数的适用范围,逐步求解的过程。
请见我的另一篇博客· 浅析 JavaScript 中的 函数 currying 柯里化
反柯里化
相反,反柯里化的作用在与扩大函数的适用性,使本来作为特定对象所拥有的功能的函数可以被任意对象所用.
即把如下给定的函数签名,
obj.func(arg1, arg2)
转化成一个函数形式,签名如下:
func(obj, arg1, arg2)
这就是 反柯里化的形式化描述。
当然是有个前提的,函数 y 需要语言上支持鸭子类型, 引自维基 在鸭子类型中,关注的不是对象的类型本身,而是它是如何使用的。...在使用鸭子类型的语言中,这样的一个函数可以接受一个任意类型的对象,并调用它的走和叫方法...
例如,下面的一个简单实现:
Function.prototype.uncurrying = function() {
var that = this;
return function() {
return Function.prototype.call.apply(that, arguments);
}
};
function sayHi () {
return "Hello " + this.value +" "+[].slice.call(arguments);
}
var sayHiuncurrying=sayHi.uncurrying();
console.log(sayHiuncurrying({value:'world'},"hahaha"));
解释:
uncurrying
是定义在Function
的prototype
上的方法,因此对所有的函数都可以使用此方法。调用时候:sayHiuncurrying=sayHi.uncurrying()
,所以uncurrying
中的this
指向的是sayHi
函数; (一般原型方法中的this
不是指向原型对象prototype
,而是指向调用对象,在这里调用对象是另一个函数,在javascript中函数也是对象)call.apply(that, arguments)
把that
设置为call
方法的上下文,然后将arguments
传给cal
l方法,前文的例子,that
实际指向sayHi
,所以调用sayHiuncurrying(arg1, arg2, ...)
相当于sayHi.call(arg1, arg2, ...)
;sayHi.call(arg1, arg2, ...)
,call
函数把arg1
当做sayHi
的上下文,然后把arg2,...
等剩下的参数传给sayHi,因此最后相当于arg1.sayHi(arg2,...)
;- 因此,这相当于
sayHiuncurrying(obj,args)
等于obj.sayHi(args)
。
最后,我们反过来看,其实反柯里化相当于把原来 sayHi(args)
的形式,转换成了 sayHiuncurrying(obj,args)
,使得sayHi
的使用范围泛化了。 更抽象地表达, uncurryinging
反柯里化,使得原来 x.y(z)
调用,可以转成 y(x',z)
形式的调用 。 假设x' 为x或者其他对象,这就扩大了函数的使用范围。
通用反柯里化函数
上面例子中把uncurrying
写进了prototype
,这不太好,我们其实可以把 uncurrying
单独封装成一个函数;
var uncurrying= function (fn) {
return function () {
var args=[].slice.call(arguments,1);
return fn.apply(arguments[0],args);
}
};
上面这个函数很清晰直接。
使用时 调用 uncurrying
并传入一个现有函数 fn
, 反柯里化函数会返回一个新函数,该新函数接受的第一个实参将绑定为 fn
中 this
的上下文,其他参数将传递给 fn
作为参数。
所以,对反柯里化更通俗的解释可以是 函数的借用,是函数能够接受处理其他对象,通过借用泛化、扩大了函数的使用范围。
所以 uncurrying
更常见的用法是对 Javascript 内置的其他方法的 借调 而不用自己都去实现一遍。
文字描述比较绕,还是继续看代码:
var test="a,b,c";
console.log(test.split(","));
var split=uncurrying(String.prototype.split); //[ 'a', 'b', 'c' ]
console.log(split(test,',')); //[ 'a', 'b', 'c' ]
split=uncurrying(String.prototype.split)
给 uncurrying
传入一个具体的fn
,即String.prototype.split
,split
函数就具有了 String.prototype.split
的功能,函数调用 split(test,',')
时,传入的第一个参数为 split
执行的上下文,剩下的参数相当于传给原 String.prototype.split
函数。
再看一个例子:
var $ = {};
console.log($.push); // undefined
var pushUncurrying = uncurrying(Array.prototype.push);
$.push = function (obj) {
pushUncurrying(this,obj);
};
$.push('first');
console.log($.length); // 1
console.log($[0]); // first
console.log($.hasOwnProperty('length')); // true
这里模仿了一个“类似jquery库” 实现时借用 Array 的 push
方法。 我们知道对象是没有 push
方法的,所以 console.log(obj.push)
返回 undefined
,可以借用Array
来处理 push
,由原生的数组方法(js引擎)来维护 伪数组对象的 length 属性和数组成员。
同样的道理,我们还可以继续有:
var indexof=uncurrying(Array.prototype.indexOf);
$.indexOf = function (obj) {
return indexof(this,obj);
};
$.push("second");
console.log($.indexOf('first')); // 0
console.log($.indexOf('second')); // 1
console.log($.indexOf('third')); // -1
例如我们在实现自己的类库时,有些方法如果有些方法和原生的类似,那么可以通过 uncurrying
借用原生方法。
我们还可以把 Function.prototype.call/apply
方法 uncurring
,例如:
var call= uncurrying(Function.prototype.call);
var fn= function (str) {
console.log(this.value+str);
};
var obj={value:"Foo "};
call(fn, obj,"Bar!"); // Foo Bar!
这样可以非常灵活地把函数也当做一个普通“数据”来使用,有函数式编程的赶脚,在一些类库中经常能看到这样的用法。
通用 uncurrying 函数的进击
上面的 uncurrying
函数是比较符合思维习惯容易理解的版本,接下来一路进击,看几个其他版本:
首先,如果B格高一点,uncurrying
也可能写成这样:
var uncurrying= function (fn) {
return function () {
var context=[].shift.call(arguments);
return fn.apply(context,arguments);
}
};
当然如果还需要再提升B格,那么还可以是这样:
var uncurrying= function (fn) {
return function () {
return Function.prototype.call.apply(fn,arguments);
}
};
拿开头的 split 的例子,看上面的高B格函数怎么运行的:
var split=uncurrying(String.prototype.split);
split(test,',');
- 传入
String.prototype.split
给fn
, fn 被应用为Function.prototype.call
的上下文,然后封装在一个新函数里面返回; - 返回新函数后给
split
,调用时split(test,',')
,则arguments
为[test,',']
- 接下来由于闭包特定 保存了
fn
,apply 到
call,相当于
fn.call(arguments),就是例子中的
Function.prototype.split.call(test,',')` - 因此第一个参数
test
对象被设置为Function.prototype.split
的上下文,其余参数','
传给split
函数
由此可见 Function.prototype.call.apply(fn,arguments)
相对于 fn.apply(arguments[0],args)
应用了 call
之后,相当于自动将 arguments
分拆成第一个参数和剩下的参数,并分别应用。 省去了前面两种写法要分拆第一个参数的步骤。
好了,追求B格提升的路是没有止境的,那么现在高潮来了:
var uncurrying=Function.prototype.bind.bind(Function.prototype.call);
我初次看到这个代码时立马晕晕转,不禁赞叹: 果然 javascript 各种奇技淫巧啊!!!
How it works!
这几个英文单词见过很多啊,哈哈,我还是再重复下,看看它是如何工作的:
这里主要用到了函数的两个原型方法 Function.prototype.call
, Function.prototype.bind
这两个函数 arguments 可以分解成两部分,第一个参数都是用于被设置成函数执行上下文,其余参数都会传递给调用函数,不同之处是 call
立即应用,所有参数全部一次传入; 但 bind
来说,剩余参数会依次传入调用函数,并延迟执行,所以说 bind
是柯里化的 ,呀,扯远了, 但不论如何,把 arguments 分拆成两部分,那么他们的代码看起来这样:
Function.prototype.call= function (scope,...args) { // 在 ECMAScript 6 中 ...表示获取其余参数
};
Function.prototype.bind= function (scope,...args) { // 在 ECMAScript 6 中 ...表示获取其余参数
};
首先,我们在 Function.prototype.bind
上调用它自己,因为 Function.prototype.bind
是一个函数,所以它也能调用原型函数 bind, 这意味着无论我们给 Function.prototype.bind.bind()
的第二个 bind
传入什么,它都会称为 第一个 bind
函数的第一个参数 scope
, 这就相当于把
var uncurrying=Function.prototype.bind.bind(Function.prototype.call);
转化为:
var uncurrying= function(){
return Function.prototype.bind.apply(Function.prototype.call)
}
等同于:
var uncurrying= function (fn) {
return Function.prototype.call.bind(fn);
};
注意这里 在call
上调用了 bind
, 我们知道 bind 会绑定,并返回一个新的函数,
这就相当于:
var uncurrying= function (fn) {
return function(scope,...args){
return fn.call(scope,...args);
}
};
在 ECMAScript 6 中 ...
表示获取其余参数,现在我们改写下使其不依赖 ES6
var uncurrying= function (fn) {
return function(){
var args=[].slice.call(arguments,1);
return fn.apply(arguments[0],args);
}
};
啊哈,我们现在绕回来了,上面的函数已经转回前文 “通用反柯里化函数” 一样了。
然后,我们现在往前进一步:
var bind = Function.prototype.bind;
uncurryThis = bind.bind(bind.call);
call = uncurryThis(bind.call);
以上代码作用是对 Function.prototype.call
进行反柯里化,不难看出,它其实就是前面高B格写法的变形。
最后我们再来看一段代码,
var bind = Function.prototype.call.bind(Function.prototype.bind);
啊哦,这段代码看起来也骨骼惊奇,相貌不凡...
我们还是继续把它转换成可读版本:
var bind = Function.prototype.call.bind(Function.prototype.bind);
// 下一步转换
var bind= function (scope) {
return function () {
return scope.call(arguments);
}
};
// 下一步转换, 把 scope用实际参数 Function.prototype.bind 带入
var bind= function () {
return Function.prototype.bind.call(arguments);
};
// 下一步转换, bind 的调用格式 bind(func, scope), 分别表示传入的函数,以及上下文
var bind= function (func,scope) {
return Function.prototype.bind.call(func,scope);
};
// 下一步转换
var bind= function (func,scope) {
return func.bind(scope);
};
测试代码:
var bind = Function.prototype.call.bind(Function.prototype.bind);
var context={foo:"bar"};
function returnFoo(){
return this.foo;
}
var amazing=bind(returnFoo,context);
console.log(amazing()); // bar
// 这个是我们经过转换得到的函数
var bind2= function (func,scope) {
return func.bind(scope);
};
var amazing2=bind2(returnFoo,context);
console.log(amazing2()); // bar
上面的测试代码把原 var bind = Function.prototype.call.bind(Function.prototype.bind);
与我们转换过后的代码进行调用,测试结果都返回相同的 bar
此文写到这里已经很长了,不知道有没有朋友会看到这里 :)
下面再最后补充一个,你看它意思是?
var slice = Function.prototype.call.bind(Array.prototype.slice);
这个从字面上能够看出来,将 call
绑定到了 Array.prototype.slice
上面, 转化过程:
var slice2= function(){
return Function.prototype.call.apply(Array.prototype.slice);
};
var slice2=function(fn) {
return Array.prototype.slice.call(fn);
};
var slice2=function() {
return Array.prototype.slice.call(arguments[0],arguments[1],arguments[2]);
};
测试代码:
var slice = Function.prototype.call.bind(Array.prototype.slice);
console.log(slice([1,2,3],0,1)); // [ 1 ]
console.log(slice2([1,2,3],0,1)); // [ 1 ]
console.log(Array.prototype.slice.call([1,2,3],0,1)); // [ 1 ]
这也算是对 Function.prototype.call
, Function.prototype.apply
, Function.prototype.bind
三个方法做个很多个练习,这三个方法是 Javascript 函数式风格的重要基础,童鞋们给上述高B格语句做装换的时候有木有一种做函数变换数学题的赶脚?
参考资料:
浅析 JavaScript 中的 函数 currying 柯里化
浅析 JavaScript 中的 Function.prototype.bind() 方法
我对原型对象中this的一个懵懂错误认识
Javascript中有趣的反柯里化技术