浅析 JavaScript 中的函数 uncurrying 反柯里化

2022-11-30 12:34:39

柯里化

柯里化又称部分求值，其含义是给函数分步传递参数，每次传递参数后部分应用参数，并返回一个更具体的函数接受剩下的参数，这中间可嵌套多层这样的接受部分参数函数，直至返回最后结果。

因此柯里化的过程是逐步传参，逐步缩小函数的适用范围，逐步求解的过程。

请见我的另一篇博客· 浅析 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 传给 call方法，前文的例子，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中有趣的反柯里化技术

码农公寓

柯里化

反柯里化

通用反柯里化函数

通用 uncurrying 函数的进击

How it works!

相关文章