JavaScript 反科里化 this [譯]

更新時間：2012年09月20日 22:51:47 作者：

本文主要講了JavaScript中科里化和反科里化this的方法.話題來自于Brendan Eich(JavaScript之父)的一個tweet

本文主要講了JavaScript中科里化和反科里化this的方法.話題來自于Brendan Eich(JavaScript之父)的一個tweet.

1.反科里化(Uncurrying)this

反科里化this的意思是:把一個簽名如下的方法:

obj.foo(arg1, arg2)轉換成另外一個簽名如下的函數(shù):

foo(obj, arg1, arg2)想要知道這么做有什么用,我們首先得了解一下通用方法.

2.通用方法(Generic methods)

通常情況下,某個特定的方法只能在某種特定類型的對象實例上使用.但是,有一些方法如果還可以使用在其他類型的對象實例上的話,那會非常有用,例如:

復制代碼代碼如下:

 
// 實際實現(xiàn)的簡化版本: 
Array.prototype.forEach = function (callback) { 
for(var i=0; i<this.length; i++) { 
if (i in this) { 
callback(this[i], i); 
} 
} 
}; 

this可以看做是forEach()方法的隱含參數(shù).滿足下面這三條規(guī)則的對象都可以調用forEach()方法,都可以作為這個隱含的this:

•具有l(wèi)ength屬性: this.length
•能夠通過索引訪問對象元素: this[i]
•能夠檢查屬性的存在性: i in this
arguments對象(包含了一次函數(shù)調用的所有實參)不是一個Array實例,所以它不能直接調用forEach()方法.但是你它滿足調用forEach方法的三個條件.為了讓該對象能夠調用到forEach()方法,我們只需要讓隱含的this參數(shù)作為顯式參數(shù).幸運的是,每個函數(shù)都有call()方法讓我們來做件事:

復制代碼代碼如下:

function printArgs() {
    Array.prototype.forEach.call(arguments, function (elem, index) {
        console.log(index+". "+elem);
    });
}

forEach.call()比forEach()方法多一個參數(shù):它的第一個參數(shù)就是指定的this值:

復制代碼代碼如下:

> printArgs("a", "b")
0. a
1. b

JavaScript中有幾個類似的通用方法都可以以這種方式來調用,這些方法大部分來自Array.prototype.

3.反科里化this的幾個用途

用例1:通過map()調用一個方法. Array.prototype.map()方法允許你在一個數(shù)組中的每個元素上調用一個函數(shù).但如果你想調用的不是函數(shù)還是方法呢?可以利用反科里化this這么做:

復制代碼代碼如下:

> var toUpperCase = String.prototype.toUpperCase.uncurryThis();
> [ "foo", "bar", "baz" ].map(toUpperCase)
[ 'FOO', 'BAR', 'BAZ' ]

用例2:將一個通用方法轉換成函數(shù). 利用反科里化this可以將一個方法轉換成一個用法更簡單的函數(shù).比如:

復制代碼代碼如下:

Array.forEach = Array.prototype.forEach.uncurryThis();
function printArgs() {
    Array.forEach(arguments, function (elem, index) {
        console.log(index+". "+elem);
    });
}

在未來版本的ECMAScript規(guī)范建議中已經(jīng)有了很多類似的數(shù)組方法.
譯者注:Firefox已經(jīng)實現(xiàn)了Array.map,

Array.forEach等方法.

4.實現(xiàn)uncurryThis() 
下面是實現(xiàn)uncurryThis方法的三種方式. 

實現(xiàn)1: Brendan Eich寫的 
復制代碼 代碼如下:
 
Function.prototype.uncurryThis = function () { 
var f = this; 
return function () { 
var a = arguments; 
return f.apply(a[0], [].slice.call(a, 1)); 
}; 
}; 
 
實現(xiàn)2: 調用反科里化過的函數(shù)相當于在原方法上通過調用它的call()方法來執(zhí)行.我們可以通過bind()方法把這個call()方法借過來: 
復制代碼 代碼如下:
 
Function.prototype.uncurryThis = function () { 
return this.call.bind(this); 
}; 
 
實現(xiàn)3: 定義的標準方法最好不要依賴過多的外部方法.此外,bind()方法只在ECMAScript 5中可用.因此我們重寫了上面的實現(xiàn)2,如下: 

復制代碼 代碼如下:
 
Function.prototype.uncurryThis = function () { 
var f = this; 
return function () { 
return f.call.apply(f, arguments) 
}; 
}; 
 
上面的代碼仍然是隱式的借用了call()方法. 

5.反向操作也很有用 – 科里化this 
uncurryThis()的反向操作稱之為curryThis().它將原函數(shù)的第一個參數(shù)轉換成隱含的this參數(shù).假如有個原函數(shù): 
復制代碼 代碼如下:
 
function(self, arg) { 
return self.foo + arg; 
} 
 
科里化this后成為: 
復制代碼 代碼如下:
 
function(arg) { 
return this.foo + arg; 
} 
 
用例: 讓一個方法把自己的this值傳遞到一個內嵌函數(shù)里.原來的寫法: 
復制代碼 代碼如下:

var obj = {
    method: function (arg) {
        var self = this; // 讓嵌套的函數(shù)訪問到this
        someFunction(..., function() {
            self.otherMethod(arg);
        });
    },
    otherMethod: function (arg) { ... }
}

科里化后你可以這么寫:
復制代碼 代碼如下:

var obj = {
    method: function (self, arg) { // 附加參數(shù)`self`
        someFunction(..., function() {
            self.otherMethod(arg);
        });
    }.curryThis(), // 傳入附加參數(shù)
    otherMethod: function (arg) { ... }
}

我們把隱含的參數(shù)this轉換成了顯式的參數(shù)self.換句話說:我們把一個動態(tài)的this轉換成了一個靜態(tài)的變量self.如果this總是作為一個顯式的參數(shù),則JavaScript會變的更簡單點.
實現(xiàn)curryThis():
復制代碼 代碼如下:

Function.prototype.curryThis = function () {
    var f = this;
    return function () {
        var a = Array.prototype.slice.call(arguments);
        a.unshift(this);
        return f.apply(null, a);
    };
};

6.如果你不想擴展函數(shù)原型
上面實現(xiàn)的方法都是加在了內置構造函數(shù)Function()的原型上.你應該可以輕松的將它們重寫為獨立的函數(shù).
復制代碼 代碼如下:

function uncurryThis(f) {
    return function () {
        return f.call.apply(f, arguments)
    };
}
function curryThis(f) {
    return function () {
        var a = Array.prototype.slice.call(arguments);
        a.unshift(this);
        return f.apply(null, a);
    };
}

7.在uncurryThis()安全的使用在已經(jīng)存在的不信任的代碼中