JavaScript 反柯里化

浅析 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 传给 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格语句做装换的时候有木有一种做函数变换数学题的赶脚？

原文：http://www.cnblogs.com/zztt/p/4152147.html

参考资料：
浅析 JavaScript 中的函数 currying 柯里化
 浅析 JavaScript 中的 Function.prototype.bind() 方法
 我对原型对象中this的一个懵懂错误认识
 Javascript中有趣的反柯里化技术

posted @ 2014-12-09 10:41 大猫Cssly 阅读(249) 评论(0) 编辑收藏举报

刷新页面返回顶部

剑心小筑

年少的身躯，追逐的心

JavaScript 反柯里化

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

柯里化

反柯里化

通用反柯里化函数

通用 uncurrying 函数的进击

How it works!

公告

剑心小筑

年少的身躯，追逐的心

JavaScript 反柯里化

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

柯里化

反柯里化

通用反柯里化函数

通用 uncurrying 函数的进击

How it works!

公告

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