JavaScript反科里化this[译]
JavaScript this
2023-06-13 09:14:35 时间
本文主要讲了JavaScript中科里化和反科里化this的方法.话题来自于BrendanEich(JavaScript之父)的一个tweet.
1.反科里化(Uncurrying)this
反科里化this的意思是:把一个签名如下的方法:
obj.foo(arg1,arg2)转换成另外一个签名如下的函数:
foo(obj,arg1,arg2)想要知道这么做有什么用,我们首先得了解一下通用方法.
2.通用方法(Genericmethods)
通常情况下,某个特定的方法只能在某种特定类型的对象实例上使用.但是,有一些方法如果还可以使用在其他类型的对象实例上的话,那会非常有用,例如:
复制代码代码如下:
1.反科里化(Uncurrying)this
反科里化this的意思是:把一个签名如下的方法:
obj.foo(arg1,arg2)转换成另外一个签名如下的函数:
foo(obj,arg1,arg2)想要知道这么做有什么用,我们首先得了解一下通用方法.
2.通用方法(Genericmethods)
通常情况下,某个特定的方法只能在某种特定类型的对象实例上使用.但是,有一些方法如果还可以使用在其他类型的对象实例上的话,那会非常有用,例如:
//实际实现的简化版本:
Array.prototype.forEach=function(callback){
for(vari=0;i<this.length;i++){
if(iinthis){
callback(this[i],i);
}
}
};
this可以看做是forEach()方法的隐含参数.满足下面这三条规则的对象都可以调用forEach()方法,都可以作为这个隐含的this:
•具有length属性:this.length
•能够通过索引访问对象元素:this[i]
•能够检查属性的存在性:iinthis
arguments对象(包含了一次函数调用的所有实参)不是一个Array实例,所以它不能直接调用forEach()方法.但是你它满足调用forEach方法的三个条件.为了让该对象能够调用到forEach()方法,我们只需要让隐含的this参数作为显式参数.幸运的是,每个函数都有call()方法让我们来做件事:
functionprintArgs(){
Array.prototype.forEach.call(arguments,function(elem,index){
console.log(index+"."+elem);
});
}
forEach.call()比forEach()方法多一个参数:它的第一个参数就是指定的this值:
>printArgs("a","b")
0.a
1.b
JavaScript中有几个类似的通用方法都可以以这种方式来调用,这些方法大部分来自Array.prototype.
3.反科里化this的几个用途
用例1:通过map()调用一个方法.Array.prototype.map()方法允许你在一个数组中的每个元素上调用一个函数.但如果你想调用的不是函数还是方法呢?可以利用反科里化this这么做:
>vartoUpperCase=String.prototype.toUpperCase.uncurryThis();
>["foo","bar","baz"].map(toUpperCase)
["FOO","BAR","BAZ"]
用例2:将一个通用方法转换成函数.利用反科里化this可以将一个方法转换成一个用法更简单的函数.比如:
Array.forEach=Array.prototype.forEach.uncurryThis();
functionprintArgs(){
Array.forEach(arguments,function(elem,index){
console.log(index+"."+elem);
});
}
在未来版本的ECMAScript规范建议中已经有了很多类似的数组方法.
译者注:Firefox已经实现了
Array.map
,Array.forEach等方法.
4.实现uncurryThis()
下面是实现uncurryThis方法的三种方式.
实现1:BrendanEich写的
复制代码代码如下:
Function.prototype.uncurryThis=function(){
varf=this;
returnfunction(){
vara=arguments;
returnf.apply(a[0],[].slice.call(a,1));
};
};
实现2:调用反科里化过的函数相当于在原方法上通过调用它的call()方法来执行.我们可以通过bind()方法把这个call()方法借过来:
复制代码代码如下:
Function.prototype.uncurryThis=function(){
returnthis.call.bind(this);
};
实现3:定义的标准方法最好不要依赖过多的外部方法.此外,bind()方法只在ECMAScript5中可用.因此我们重写了上面的实现2,如下:
复制代码代码如下:
Function.prototype.uncurryThis=function(){
varf=this;
returnfunction(){
returnf.call.apply(f,arguments)
};
};
上面的代码仍然是隐式的借用了call()方法.
5.反向操作也很有用?科里化this
uncurryThis()的反向操作称之为curryThis().它将原函数的第一个参数转换成隐含的this参数.假如有个原函数:
复制代码代码如下:
function(self,arg){
returnself.foo+arg;
}
科里化this后成为:
复制代码代码如下:
function(arg){
returnthis.foo+arg;
}
用例:让一个方法把自己的this值传递到一个内嵌函数里.原来的写法:
复制代码代码如下:
varobj={
method:function(arg){
varself=this;//让嵌套的函数访问到this
someFunction(...,function(){
self.otherMethod(arg);
});
},
otherMethod:function(arg){...}
}
科里化后你可以这么写:
复制代码代码如下:
varobj={
method:function(self,arg){//附加参数`self`
someFunction(...,function(){
self.otherMethod(arg);
});
}.curryThis(),//传入附加参数
otherMethod:function(arg){...}
}
我们把隐含的参数this转换成了显式的参数self.换句话说:我们把一个动态的this转换成了一个静态的变量self.如果this总是作为一个显式的参数,则JavaScript会变的更简单点.
实现curryThis():
复制代码代码如下:
Function.prototype.curryThis=function(){
varf=this;
returnfunction(){
vara=Array.prototype.slice.call(arguments);
a.unshift(this);
returnf.apply(null,a);
};
};
6.如果你不想扩展函数原型
上面实现的方法都是加在了内置构造函数Function()的原型上.你应该可以轻松的将它们重写为独立的函数.
复制代码代码如下:
functionuncurryThis(f){
returnfunction(){
returnf.call.apply(f,arguments)
};
}
functioncurryThis(f){
returnfunction(){
vara=Array.prototype.slice.call(arguments);
a.unshift(this);
returnf.apply(null,a);
};
}
7.在uncurryThis()安全的使用在已经存在的不信任的代码中
MarkMiller把uncurryThis()作为例子讲解了“安全的元编程”:
译者注:科里化this就是把函数的第一个参数转换成方法中的this.反科里化this就是把方法中的this转换成函数的第一个参数.
相关文章
- JavaScript中的this(保证学会)
- JavaScript Array Object
- 【说站】javascript中原型对象this的原则
- javascript表单提交的内容显示在表格中
- ORA-22954: This multiset operation is not supported for this element type. ORACLE 报错 故障修复 远程处理
- JavaScript学习总结(十)——this关键字详解编程语言
- JavaScript窗口功能指南之在窗口中书写内容
- Javascript更新JavaScript数组的uniq方法
- javascript火狐(firefox)不显示本地图片问题解决
- Javascript阻止javascript事件冒泡,获取控件ID值
- PPK谈JavaScript的this关键字[翻译]
- JavaScript设计模式富有表现力的Javascript(一)
- JavaScript子窗口ModalDialog中操作父窗口对像
- Javascript之this关键字深入解析
- 为Javascript中的String对象添加去除左右空格的方法(示例代码)
- JavaScript中Math对象方法使用概述
- javascript匿名函数应用示例介绍
- JavaScript使用HTML5的window.postMessage实现跨域通信例子
- Javascript基础教程之JavaScript语法