函数式JavaScript编程指南（4）

第五课 - 它好在哪里

OK，现在我们已经学习了一些函数式JavaScript的内容。那么它好在哪里？函数式JavaScript编程之所以很重要有三条主要的理由：

• 它有助于写出模块化和可服用的代码。
  

• 它对事件处理程序非常有效。
  

• 它很有趣！
  

在下面的篇幅中，我会给出更多关于前两条理由的信息

1. 模块化和可复用的代码现在你已经知道如何将函数作为值使用，那么你也应该试试！

一个很好的例子是数组内建的sort方法。

预定义的sort()把所有的对象转换成字符串并把他们按照词语的顺序排序。

但如果我们有用户自定义的对象或者数字那么它就不是很有用了。

于是这个函数可以让你给他一个进行比较的函数作为参数，如sort(compareFunction)。
这个方法让我们甚至不用接触实际的sort方法。
例:

var myarray = new Array(6,7,9,1,-1);var sortAsc = function(x,y) { return x-y; };

var sortDesc = function(x,y) { return y-x; };myarray.sort(sortDesc);
alert(myarray);myarray.sort(sortAsc);alert(myarray); 

2. 事件处理程序对事件处理程序使用函数式编程也许是最直观的函数作为值得应用了。

既然这样我们马上就演示一个例子。
简单的例子：;ie

现在有一个Button类，带一个自定义的onclick行为。

function Button(clickFunction) {    this.button = document.createElement("button");    this.button.appendChild(document.createTextNode("Press me!"));    this.button.onclick = clickFunction;}var bt = new Button(function() { alert("42"); });

练习： 为什么我们要把alert包裹在一个匿名函数中？
高级例子：
现在我们想改进我们的Button类。
每一个按钮都被分配了一个值当按钮被点击时显示该值。
首先我们调整我们的类：

function Button(value) {    this.value = value;    this.button = document.createElement("button");    this.button.appendChild(document.createTextNode("test"));} 

下面你也许要尝试写下面的代码：

this.button.onclick = function() { alert(this.value); }; 

如果你执行它你就会发现提示框中间是空的。

为什么会这样呢？其实原因在于JavaScript的可见性规则。

当onclick函数被执行时this指向的是按钮的DOM节点而非自定义的按钮对象。

我们如何解决这个问题？
使用函数式编程：

this.button.onclick = (function(v) { return function() { alert(v); };}) (this.value); 

这种情况下执行该匿名函数会将v绑定到this.value上。

转载地址:
http://www.nirvanastudio.org/wp-content/uploads/2006/04/Functional_JavaScript_Programming.htm