函数式JavaScript编程指南

简介

你是否了解JavaScript同样具备函数式编程的能力？本指南旨在指导你掌握并运用JavaScript中的函数式特性。

前置要求：你需要对JavaScript语言本身以及DOM操作有基础认知。

编写此指南的初衷在于，尽管JavaScript相关资源浩如烟海，但专门探讨其函数式特性的内容却寥寥无几。因此，本文仅聚焦于基础概念，不会深入探讨其他函数式语言或Lambda演算等复杂理论。

你可以点击文中的示例代码，系统将直接执行并展示结果，从而使指南具备交互性。此外，你也可以通过提供的沙箱环境进行独立尝试。

第一课 —— 匿名函数

第二课 - 函数作为值

第三课 - 两种方式调用函数

第四课 - “短路”条件调用

第五课 - 它好在哪里

JavaScript Programming 原文地址：http://www.pfeiffer-mediation.de/remast/javascript.php 翻译：ShiningRay

函数式JavaScript编程指南

简介

你是否了解JavaScript同样具备函数式编程的能力？本指南旨在指导你掌握并运用JavaScript中的函数式特性。

前置要求：你需要对JavaScript语言本身以及DOM操作有基础认知。

编写此指南的初衷在于，尽管JavaScript相关资源浩如烟海，但专门探讨其函数式特性的内容却寥寥无几。因此，本文仅聚焦于基础概念，不会深入探讨其他函数式语言或Lambda演算等复杂理论。

你可以点击文中的示例代码，系统将直接执行并展示结果，从而使指南具备交互性。此外，你也可以通过提供的沙箱环境进行独立尝试。

第一课 —— 匿名函数

我们首先介绍匿名函数。所谓匿名函数，即没有显式名称的函数。你可以将其视为一次性使用的工具。当某个函数仅需调用一次时，匿名函数尤为适用。使用匿名函数无需将函数长期驻留内存，从而提高了执行效率。

例Example:

下面两个函数处理同样的事情，而

在给

赋值结束之后一直保留——但匿名函数则不会。

function average(x,y) {
 return (x+y)/2;
}
var z = average(1,3);
alert(z);

var z = function(x,y) {
   return (x+y)/2;
  } (1,3);
alert(z);

这很自然得引出了我们下面的一节课函数作为值。

第二课 - 函数作为值

事实上，我们通常在JavaScript中声明函数的方式可以看作是一种简化语法（即语法糖，syntactic sugar）。

例：

下面两个表达式其实完全一样。所以左边的表达式仅仅是右边的简写。

function average(x,y) {
 return (x+y)/2;
}
alert( average(1,3) );

var average = function(x,y) {
 return (x+y)/2;
}
alert( average(1,3) );

从这里可以得出一个结论，函数是一个值就像字符串、数字或数组一样。这还出现几个问题：

我是否可以把函数作为参数传递？

可以，见下面的例子。

是否可以实时生成函数？

当然了，这是一个高级的主题，它可以通过eval函数来完成。小提示：看看本页面的源代码。

例：

这个例子演示了如何把函数作为参数传递。

var applyFun = function (f,x,y) { return f(x,y); };

var add = function(x,y) {
 return x+y;
};

alert( applyFun(add,3,4) ); // 7

第三课 - 两种方式调用函数

在JavaScript中，有两种调用函数的方式。一般的方式是把参数放在括号中，如alert(42)。另一种方式是同时把函数和参数都放在括号中，如(alert)(42)。

例：

alert(42);

(alert) (42);

(function(x) { alert(x-13); }) (55);

为什么函数两边的括号很重要： 如果你写了括号，那么在括号中的代码就会被先计算。在计算之后，括号所在的地方就会有一个值。这个值可能是一个字符串、一个数字或一个函数。

第四课 - “短路”条件调用

现在我们将学习如何使用“短路”条件调用。使用这个方法可以缩短源代码同时代码也变得更加可读。

例：

这个语法并不是用在左表达式上，而是用在右表达式上。

var f = false; var t = true;
var z;
if(f)
 z = 4;
else if(t)
 z = 2;
alert(z);

var f = false; var t = true;
var z = (f && 4) || (t && 2);
alert(z);

第五课 - 它好在哪里

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

1. 它有助于写出模块化和可服用的代码。
2. 它对事件处理程序非常有效。
3. 它很有趣！

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

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"); });

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

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

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

alert(42);

更多信息

下面是关于函数式JavaScript编程的一些有趣的链接：

• w3future.com - 针对事件处理函数和回调函数的函数式编程
• svendtofte.com - 实用的（& 函数式的）JavaScript代码片断
• svendtofte.com - 极好的JavaScript库（包括 map, fold, ...）
• CodingForums - 关于使用Lambda算子的函数式JavaScript的一篇更加理论性的文章
• Lambda tutorial - 关于在JavaScript中编码Lambda算子的教程
• The Little JavaScripter - 关于 Scheme 和 JavaScript 之间的比较

展望

本节给大家展示一下JavaScript的未来。一个非常振奋人心的JavaScript特性——

，一个JavaScript中直接的XML支持。

• Wikipedia on E4X - 关于 E4X 的很好的介绍
• Mozilla E4X - Brandon Eich （Mozilla首席架构师）关于E4X的演示