本文主要讲了JavaScript中科里化和反科里化this的方法.话题来自于Brendan Eich(JavaScript之父)的一个tweet.
1.反科里化(Uncurrying)this
反科里化this的意思是:把一个签名如下的方法:
obj.foo(arg1, arg2)转换成另外一个签名如下的函数:
foo(obj, arg1, arg2)想要知道这么做有什么用,我们首先得了解一下通用方法.
2.通用方法(Generic methods)
通常情况下,某个特定的方法只能在某种特定类型的对象实例上使用.但是,有一些方法如果还可以使用在其他类型的对象实例上的话,那会非常有用,例如:
this可以看做是forEach()方法的隐含参数.满足下面这三条规则的对象都可以调用forEach()方法,都可以作为这个隐含的this:
•具有length属性: this.length
•能够通过索引访问对象元素: this[i]
•能够检查属性的存在性: i in this
arguments对象(包含了一次函数调用的所有实参)不是一个Array实例,所以它不能直接调用forEach()方法.但是你它满足调用forEach方法的三个条件.为了让该对象能够调用到forEach()方法,我们只需要让隐含的this参数作为显式参数.幸运的是,每个函数都有call()方法让我们来做件事:
3.反科里化this的几个用途
用例1:通过map()调用一个方法. Array.prototype.map()方法允许你在一个数组中的每个元素上调用一个函数.但如果你想调用的不是函数还是方法呢?可以利用反科里化this这么做:
Array.map,Array.forEach等方法.<br><br><strong>4.实现uncurryThis() <br></strong>下面是实现uncurryThis方法的三种方式. <br><br>实现1: Brendan Eich写的 <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="60855" class="copybut" id="copybut60855" onclick="doCopy('code60855')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code60855"> <br>Function.prototype.uncurryThis = function () { <br>var f = this; <br>return function () { <br>var a = arguments; <br>return f.apply(a[0], [].slice.call(a, 1)); <br>}; <br>}; <br>
</div> <br>实现2: 调用反科里化过的函数相当于在原方法上通过调用它的call()方法来执行.我们可以通过bind()方法把这个call()方法借过来: <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="87558" class="copybut" id="copybut87558" onclick="doCopy('code87558')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code87558"> <br>Function.prototype.uncurryThis = function () { <br>return this.call.bind(this); <br>}; <br>
</div> <br>实现3: 定义的标准方法最好不要依赖过多的外部方法.此外,bind()方法只在ECMAScript 5中可用.因此我们重写了上面的实现2,如下: <br><br><div class="codetitle">
<span><a style="CURSOR: pointer" data="7449" class="copybut" id="copybut7449" onclick="doCopy('code7449')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code7449"> <br>Function.prototype.uncurryThis = function () { <br>var f = this; <br>return function () { <br>return f.call.apply(f, arguments) <br>}; <br>}; <br>
</div> <br>上面的代码仍然是隐式的借用了call()方法. <br><br><strong>5.反向操作也很有用 – 科里化this <br></strong>uncurryThis()的反向操作称之为curryThis().它将原函数的第一个参数转换成隐含的this参数.假如有个原函数: <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="74336" class="copybut" id="copybut74336" onclick="doCopy('code74336')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code74336"> <br>function(self, arg) { <br>return self.foo + arg; <br>} <br>
</div> <br>科里化this后成为: <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="73673" class="copybut" id="copybut73673" onclick="doCopy('code73673')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code73673"> <br>function(arg) { <br>return this.foo + arg; <br>} <br>
</div> <br>用例: 让一个方法把自己的this值传递到一个内嵌函数里.原来的写法: <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="49106" class="copybut" id="copybut49106" onclick="doCopy('code49106')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code49106">
<br>var obj = {<br> method: function (arg) {<br> var self = this; // 让嵌套的函数访问到this<br> someFunction(..., function() {<br> self.otherMethod(arg);<br> });<br> },<br> otherMethod: function (arg) { ... }<br>}<br>
</div>
<br>科里化后你可以这么写:<br><div class="codetitle">
<span><a style="CURSOR: pointer" data="22807" class="copybut" id="copybut22807" onclick="doCopy('code22807')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code22807">
<br>var obj = {<br> method: function (self, arg) { // 附加参数`self`<br> someFunction(..., function() {<br> self.otherMethod(arg);<br> });<br> }.curryThis(), // 传入附加参数<br> otherMethod: function (arg) { ... }<br>}<br>
</div>
<br>我们把隐含的参数this转换成了显式的参数self.换句话说:我们把一个动态的this转换成了一个静态的变量self.如果this总是作为一个显式的参数,则JavaScript会变的更简单点.
<p>实现curryThis():<br></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="75145" class="copybut" id="copybut75145" onclick="doCopy('code75145')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code75145">
<br>Function.prototype.curryThis = function () {<br> var f = this;<br> return function () {<br> var a = Array.prototype.slice.call(arguments);<br> a.unshift(this);<br> return f.apply(null, a);<br> };<br>};<br>
</div>
<p><strong>6.如果你不想扩展函数原型</strong></p>
<p>上面实现的方法都是加在了内置构造函数Function()的原型上.你应该可以轻松的将它们重写为独立的函数.<br></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="18130" class="copybut" id="copybut18130" onclick="doCopy('code18130')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code18130">
<br>function uncurryThis(f) {<br> return function () {<br> return f.call.apply(f, arguments)<br> };<br>}<br>function curryThis(f) {<br> return function () {<br> var a = Array.prototype.slice.call(arguments);<br> a.unshift(this);<br> return f.apply(null, a);<br> };<br>}<br>
</div>
<p><strong>7.在uncurryThis()安全的使用在已经存在的不信任的代码中</strong></p>
<p>Mark Miller<tt>把uncurryThis()作为例子讲解了</tt>“<a href="http://wiki.ecmascript.org/doku.php?id=conventions:safe_meta_programming" target="_blank">安全的元编程</a>”:<br><br>译者注:科里化this就是把函数的第一个参数转换成方法中的this.反科里化this就是把方法中的this转换成函数的第一个参数.</p>
