函数式JavaScript编程指南

函数式JavaScript编程指南

简介

你是否知道JavaScript其实也是一个函数式编程语言呢?本指南将教你如何利用JavaScript的函数式特性。

要求:你应当已经对JavaScript和DOM有了一个基本的了解。

写这篇指南的目的是因为关于JavaScript编程的资料太多了但是极少的资料提到了JavaScript的函数式特性。在本指南中,我只会讲解这些基本知识而不会深入其它的函数式语言或这是Lambda算子。

你可以点击所有的例子然后你所看到的代码就会被执行,这样就可以令指南变得具有交互性。你也可以使用这个沙箱来尝试。

第一课 —— 匿名函数

我们将首先介绍匿名函数。一个匿名函数就是一个没有名字的函数。
你可以认为他们是一次性函数。当你只需要用一次某个函数式,他们就特别有用。通过使用匿名函数,没有必要把函数一直放在内存中,所以使用匿名函数更加有效率。

例Example:

下面两个函数处理同样的事情,而average在给z赋值结束之后一直保留——但匿名函数则不会。

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

第二课 – 函数作为值

事实上,我们一般在JavaScript中声明函数的方式可以看作是一个简化了的语法(也就是语法糖syntactic sugar)。

例:

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

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

我是否可以把函数作为参数传递?
可以,见下面的例子。
是否可以实时生成函数?
当然了,这是一个高级的主题,它可以通过eval函数来完成。小提示:看看本页面的源代码。

例:

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

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

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

例:

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

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

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

例:

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

第五课 – 它好在哪里

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

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

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

1. 模块化和可复用的代码

现在你已经知道如何将函数作为值使用,那么你也应该试试!一个很好的例子是数组内建的sort方法。预定义的sort()把所有的对象转换成字符串并把他们按照词语的顺序排序。但如果我们有用户自定义的对象或者数字那么它就不是很有用了。于是这个函数可以让你给他一个进行比较的函数作为参数,如sort(compareFunction)。这个方法让我们甚至不用接触实际的sort方法。

例:

2. 事件处理程序

对事件处理程序使用函数式编程也许是最直观的函数作为值得应用了。既然这样我们马上就演示一个例子。

简单的例子:;ie

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

练习: 为什么我们要把alert包裹在一个匿名函数中?

高级例子:

现在我们想改进我们的Button类。每一个按钮都被分配了一个值当按钮被点击时显示该值。首先我们调整我们的类:

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

如果你执行它你就会发现提示框中间是空的。为什么会这样呢?其实原因在于JavaScript的可见性规则。当onclick函数被执行时this指向的是按钮的DOM节点而非自定义的按钮对象。

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

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

沙箱

在此处输入你的代码,并按下计算.


更多信息

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

展望

本节给大家展示一下JavaScript的未来。一个非常振奋人心的JavaScript特性——E4X,一个JavaScript中直接的XML支持。

“函数式JavaScript编程指南”的18个回复

  1. 简单的例子:;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”); });

    如果我要在页面里显示bt这个按钮,该怎么写呢?

  2. @ggcm
    应该用document.body.appendChild(bt)这样。
    具体内容我没有亲自实现过,我一般使用诸如prototype.js或者jquery这样的框架来帮我完成

  3. Pingback: BFL
  4. est:
    不把alert放进另一个函数中的话,把什么传递给onclick?把alert?那样当click时不是调用了没有参数的alert了吗?

  5. 其实原因在于JavaScript的可见性规则。当onclick函数被执行时this指向的是按钮的DOM节点而非自定义的按钮对象

    ==========
    博主麻烦能不能多给点可见性规则的资料,详细点的就好,最后一个例子我实在看不太明白,js也一直卡在这里了,

  6. 属于扯淡的文章
    var z = function(x,y) {
    return (x+y)/2;
    } (1,3);
    alert(z);
    这个你能说明匿名函数销毁
    弹出值是2,就能说明它销毁了

发表评论

电子邮件地址不会被公开。 必填项已用*标注