js函数式编程.docx
《js函数式编程.docx》由会员分享，可在线阅读，更多相关《js函数式编程.docx（13页珍藏版）》请在冰豆网上搜索。
js函数式编程
议论JavaScript函数式编程
函数式编程简介
函数式编程是种编程范式，它将电脑运算视为函数的计算。
函数编程语言最重要的基础是λ演算（lambdacalculus）。
而且λ演算的函数可以接受函数当作输入（参数）和输出（返回值）。
和指令式编程相比，函数式编程强调函数的计算比指令的执行重要。
和过程化编程相比，函数式编程里，函数的计算可随时调用。
（来自XX）
函数式编程语言特性
在函数式编程语言中，函数是第一类的对象，也就是说，函数 不依赖于任何其他的对象而可以独立存在，而在面向对象的语言中，函数（方法）是依附于对象的，属于对象的一部分。
这一点j决定了函数在函数式语言中的一些特别的性质，比如作为传出/传入参数，作为一个普通的变量等。
区别于命令式编程语言，函数式编程语言具有一些专用的概念，我们分别进行讨论：
匿名函数
在函数式编程语言中，函数是可以没有名字的，匿名函数通常表示：
“可以完成某件事的一块代码”。
这种表达在很多场合是有用的，因为我们有时需要用函数完成某件事，但是这个函数可能只是临时性的，那就没有理由专门为其生成一个顶层的函数对象。
比如：
清单1.map函数
functionmap（array,func）{
varres=[];
for（vari=0,len=array.length;ires.push（func（array[i]））;
}
returnres;
}
varmapped=map（[1,3,5,7,8],function（n）{
returnn=n+1;
}）;
print（mapped）;
运行这段代码，将会打印：
2,4,6,8,9//对数组[1,3,5,7,8]中每一个元素加1
注意map函数的调用，map的第二个参数为一个函数，这个函数对map的第一个参数（数组）中的每一个都有作用，但是对于map之外的代码可能没有任何意义，因此，我们无需为其专门定义一个函数，匿名函数已经足够。
柯里化
柯里化是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。
这句话有点绕口，我们可以通过例子来帮助理解：
清单2.柯里化函数
functionadder（num）{
return
function（x）{
returnnum+x;
}
}
varadd5=adder（5）;
varadd6=adder（6）;
print（add5
（1））;
print（add6
（1））;
结果为：
6
7
比较有意思的是：
函数adder接受一个参数，并返回一个函数，这个返回的函数可以被预期的那样被调用。
变量add5保持着adder（5）返回的函数，这个函数可以接受一个参数，并返回参数与5的和。
柯里化在DOM的回调中非常有用，我们将在下面的小节中看到。
高阶函数
高阶函数即为对函数的进一步抽象，事实上，我们在匿名函数小节提到的map函数即为一种高阶函数，在很多的函数式编程语言中均有此函数。
map（array,func）的表达式已经表明，将func函数作用于array中的每一个元素，最终返回一个新的array，应该注意的是，map对array和func的实现是没有任何预先的假设的，因此称之为“高阶”函数：
清单3.高阶函数
functionmap（array,func）{
varres=[];
for（vari=0,len=array.length;ires.push（func（array[i]））;
}
returnres;
}
varmapped=map（[1,3,5,7,8],function（n）{
returnn=n+1;
}）;
print（mapped）;
varmapped2=map（["one","two","three","four"],
function（item）{
return"（"+item+"）";
}）;
print（mapped2）;
将会打印如下结果：
2,4,6,8,9
（one）,（two）,（three）,（four）//为数组中的每个字符串加上括号
mapped和mapped2均调用了map，但是得到了截然不同的结果，因为map的参数本身已经进行了一次抽象，map函数做的是第二次抽象，高阶的“阶”可以理解为抽象的层次。
JavaScript中的函数式编程
JavaScript是一门被误解甚深的语言，由于早期的Web开发中，充满了大量的copy-paste代码，因此平时可以见到的JavaScript代码质量多半不高，而且JavaScript代码总是很飞动的不断闪烁的gif广告，限制网页内容的复制等联系在一起的，因此包括Web开发者在内的很多人根本不愿意去学习JavaScript。
这种情形在Ajax复兴时得到了彻底的扭转，GoogleMap，Gmail等Ajax应用的出现使人们惊叹：
原来JavaScript还可以做这样的事！
很快，大量优秀的JavaScript/Ajax框架不断出现，比如Dojo，Prototype，jQuery，ExtJS等等。
这些代码在给页面带来绚丽的效果的同时，也让开发者看到函数式语言代码的优雅。
函数式编程风格
在JavaScript中，函数本身为一种特殊对象，属于顶层对象，不依赖于任何其他的对象而存在，因此可以将函数作为传出/传入参数，可以存储在变量中，以及一切其他对象可以做的事情（因为函数就是对象）。
JavaScript被称为有着C语法的LISP，LISP代码的一个显著的特点是大量的括号以及前置的函数名，比如：
清单4.LISP中的加法
（+134567）
加号在LISP中为一个函数，这条表达式的意思为将加号后边的所有数字加起来，并将值返回，JavaScript可以定义同样的求和函数：
清单5.JavaScript中的求和
functionsum（）{
varres=0;
for（vari=0,len=arguments.length;ires+=parseInt（arguments[i]）;
}
returnres;
}
print（sum（1,2,3））;
print（sum（1,2,3,4,6,7,8））;
运行此段代码，得到如下结果：
6
31
如果要完全模拟函数式编码的风格，我们可以定义一些诸如：
清单6.一些简单的函数抽象
functionadd（a,b）{returna+b;}
functionsub（a,b）{returna-b;}
functionmul（a,b）{returna*b;}
functiondiv（a,b）{returna/b;}
functionrem（a,b）{returna%b;}
functioninc（x）{returnx+1;}
functiondec（x）{returnx-1;}
functionequal（a,b）{returna==b;}
functiongreat（a,b）{returna>b;}
functionless（a,b）{returna这样的小函数以及谓词，那样我们写出的代码就更容易被有函数式编程经验的人所接受：
清单7.函数式编程风格
//修改之前的代码
functionfactorial（n）{
if（n==1）{
return1;
}else{
returnfactorial（n-1）*n;
}
}
//更接近“函数式”编程风格的代码
functionfactorial（n）{
if（equal（n,1））{
return1;
}else{
returnmul（n,factorial（dec（n）））;
}
}
闭包及其使用
闭包是一个很有趣的主题，当在一个函数outter内部定义另一个函数inner，而inner又引用了outter作用域内的变量，在outter之外使用inner函数，则形成了闭包。
描述起来虽然比较复杂，在实际编程中却经常无意的使用了闭包特性。
清单8.一个闭包的例子
functionoutter（）{
varn=0;
return
function（）{
returnn++;
}
}
varo1=outter（）;
o1（）;//n==0
o1（）;//n==1
o1（）;//n==2
varo2=outter（）;
o2（）;//n==0
o2（）;//n==1
匿名函数function（）{returnn++;}中包含对outter的局部变量n的引用，因此当outter返回时，n的值被保留（不会被垃圾回收机制回收），持续调用o1（），将会改变n的值。
而o2的值并不会随着o1（）被调用而改变，第一次调用o2会得到n==0的结果，用面向对象的术语来说，就是o1和o2为不同的 实例，互不干涉。
总的来说，闭包很简单，不是吗？
但是，闭包可以带来很多好处，比如我们在Web开发中经常用到的：
清单9.jQuery中的闭包
varcon=$（"div#con"）;
setTimeout（function（）{
con.css（{background:
"gray"}）;
},2000）;
上边的代码使用了jQuery的选择器，找到id为con的div元素，注册计时器，当两秒中之后，将该div的背景色设置为灰色。
这个代码片段的神奇之处在于，在调用了setTimeout函数之后，con依旧被保持在函数内部，当两秒钟之后，id为con的div元素的背景色确实得到了改变。
应该注意的是，setTimeout在调用之后已经返回了，但是con没有被释放，这是因为con引用了全局作用域里的变量con。
使用闭包可以使我们的代码更加简洁，关于闭包的更详细论述可以在参考信息中找到。
由于闭包的特殊性，在使用闭包时一定要小心，我们再来看一个容易令人困惑的例子：
清单10.错误的使用闭包
varoutter=[];
functionclouseTest（）{
vararray=["one","two","three","four"];
for（vari=0;ivarx={};
x.no=i;
x.text=array[i];
x.invoke=function（）{
print（i）;
}
outter.push（x）;
}
}
上边的代码片段很简单，将多个这样的JavaScript对象存入outter数组：
清单11.匿名对象
{
no:
Number,
text:
String,
invoke:
function（）{
//打印自己的no字段
}
}
我们来运行这段代码：
清单12.错误的结果
clouseTest（）;//调用这个函数，向outter数组中添加对象
for（vari=0,len=outter.length;ioutter[i].invoke（）;
}
出乎意料的是，这段代码将打印：
4
4
4
4
而不是1，2，3，4这样的序列。
让我们来看看发生了什么事，每一个内部变量x都填写了自己的no,text,invoke字段，但是invoke却总是打印最后一个i。
原来，我们为invoke注册的函数为：
清单13.错误的原因
functioninvoke（）{
print（i）;
}
每一个invoke均是如此，当调用outter[i].invoke时，i的值才会被去到，由于i是闭包中的局部变量，for循环最后退出时的值为4，因此调用outter中的每个元素都会得到4。
因此，我们需要对这个函数进行一些改造：
清单14.正确的使用闭包
varoutter=[];
functionclouseTest2（）{
vararray=["one","two","three","four"];
for（vari=0;ivarx={};
x.no=i;
x.text=array[i];
x.invoke=function（no）{
return
function（）{
print（no）;
}
}（i）;
outter.push（x）;
}
}
通过将函数 柯里化，我们这次为outter的每个元素注册的其实是这样的函数：
//x==0
x.invoke=function（）{print（0）;}
//x==1
x.invoke=function（）{print
（1）;}
//x==2
x.invoke=function（）{print
（2）;}
//x==3
x.invoke=function（）{print（3）;}
这样，就可以得到正确的结果了。
实际应用中的例子
好了，理论知识已经够多了，我们下面来看看现实世界中的JavaScript函数式编程。
有很多人为使JavaScript具有面向对象风格而做出了很多努力（JavaScript本身具有 可编程性），事实上，面向对象并非必须，使用函数式编程或者两者混合使用可以使代码更加优美，简洁。
jQuery是一个非常优秀JavaScript/Ajax框架，小巧，灵活，具有插件机制，事实上，jQuery的插件非常丰富，从表达验证，客户端图像处理，UI，动画等等。
而jQuery最大的特点正如其宣称的那样，改变了人们编写JavaScript代码的风格。
优雅的jQuery
有经验的前端开发工程师会发现，平时做的最多的工作有一定的模式：
选择一些DOM元素，然后将一些规则作用在这些元素上，比如修改样式表，注册事件处理器等。
因此jQuery实现了完美的CSS选择器，并提供跨浏览器的支持：
清单15.jQuery选择器
varcons=$（"div.note"）;//找出所有具有note类的div
varcon=$（"div#con"）;//找出id为con的div元素
varlinks=$（"a"）;//找出页面上所有的链接元素
当然，jQuery的选择器规则非常丰富，这里要说的是：
用jQuery选择器选择出来的jQuery对象本质上是一个List，正如LISP语言那样，所有的函数都是基于List的。
有了这个List，我们可以做这样的动作：
清单16.jQuery操作jQuery对象（List）
cons.each（function（index）{
$（this）.click（function（）{
//dosomethingwiththenode
}）;
}）;
想当与对cons这个 List中的所有元素使用map（还记得我们前面提到的map吗？
），操作结果仍然为一个List。
我们可以任意的扩大/缩小这个列表，比如：
清单17.扩大/缩小jQuery集合
cons.find（"span.title"）;//在div.note中进行更细的筛选
cons.add（"div.warn"）;//将div.note和div.warn合并起来
cons.slice（0,5）;//获取cons的一个子集
现在我们来看一个小例子，假设有这样一个页面：
清单18.页面的HTML结构
Hello,world
升级会员 