比较不错的函数式JavaScript编程指南教程

2024-03-20 08:34:17

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

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

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

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

第一课 —— 匿名函数

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

例Example:

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

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. 模块化和可复用的代码

现在你已经知道如何将函数作为值使用，那么你也应该试试！一个很好的例子是数组内建的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上。

沙箱

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

alert(42);

展望

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

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

This entry was written by ShiningRay, posted on 2008-01-02 at 22:Jan, filed under 翻译 and tagged javascript, 函数式编程. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

-->

JS面向对象编程之对象使用分析

因为大家总是用面向过程的编程思想来写JS代码,而且也由于网络上充斥了太多小"巧"的JS代码段,很多都是随意而为,很不规范,这也就造成了大家对JS的"误解",一味的认为它就是一个辅助的小东东,而不适合做大的东西开发.但是自从AJAX兴起后,大量的JS代码编写要求人们具备像写JAVA类似的代码一样,能够面向对象进行开发. 所以下面就结合我自己的体会和所学习的东东和大家一起来学习在JS中如何使用面向对象的编程.其实使用JS进行面向对象开发也不是很难的事情,因为在JS中每一
用函数式编程技术编写优美的 JavaScript_ibm

因为函数式编程采用了完全不同的组织程序的方式,所以那些习惯于采用命令式范例的程序员可能会发现函数式编程有点难学.在这篇文章中,您将了解一些关于如何采用函数式风格,用 JavaScript 编写良好的.优美的代码的示例.我将讨论: 函数式编程概念,包括匿名函数.调用函数的不同方法,以及将函数作为参数传递给其他函数的方式. 函数式概念的运用,采用的示例包括:扩展数组排序:动态 HTML 生成的优美代码:系列函数的应用. 函数式编程概念请告诉每个人.请把这个提交给: Digg Slashdot 在那
JS面向对象编程浅析

在AJAX兴起以前,很多人写JS可以说都是毫无章法可言的,基本上是想到什么就写什么,就是一个接一个的函数function,遇到重复的还得copy,如果一不小心函数重名了,还真不知道从何开始查找错误,因为大家总是用面向过程的编程思想来写JS代码,而且也由于网络上充斥了太多小"巧"的JS代码段,很多都是随意而为,很不规范,这也就造成了大家对JS的"误解",一味的认为它就是一个辅助的小东东,而不适合做大的东西开发.但是自从AJAX兴起后,大量的JS代码编写要求人们具备像写
JS编程小常识很有用

1.JS中的是是非非 JS是一门计算机编程语言,是一门动态语言也称为脚本语言,是解析型编程语言.为什么是脚本?因为他本身不能执行,就是没有main函数或主程序的入口,必须被他的宿主环境,也就是解析环境解析执行他.为是什么是解析型?因为JS不会进行编程,链接,汇编等一系统的过程生成某个文件,再执行,他就是以字符串形式加载执行.. 2.JS中的真真假假空,null,undefined,false,0,"",'',NaN都为假,其他都为真 3.函数,类,对象,构造器有什么区别? 答:在js
探究JavaScript函数式编程的乐趣

编程范式编程范式是一个由思考问题以及实现问题愿景的工具组成的框架.很多现代语言都是聚范式(或者说多重范式): 他们支持很多不同的编程范式,比如面向对象,元程序设计,泛函,面向过程,等等. 函数式编程范式函数式编程就像一辆氢燃料驱动的汽车--先进的未来派,但是还没有被广泛推广.与命令式编程相反,他由一系列语句组成,这些语句用于更新执行时的全局状态.函数式编程将计算转化作表达式求值.这些表达式全由纯数学函数组成,这些数学函数都是一流的(可以被当做一般值来运用和处理),并且没有副作用. 函数式编程
javascript编程必备_JS语法字典第1/2页

1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document) 5.得到表单中元素的名称和值:document.getElementById("表单中元素的ID号").name(或value) 6.一个小写转大
JavaScript与函数式编程解释

作者:月影牢记:函数式编程不是用函数来编程!!!23.4函数式编程 23.4.1 什么是函数式编程什么是函数式编程?如果你这么直白地询问,会发现它竟是一个不太容易解释的概念.许多在程序设计领域有着多年经验的老手,也无法很明白地说清楚函数式编程到底在研究些什么.函数式编程对于熟悉过程式程序设计的程序员来说的确是一个陌生的领域,闭包(closure),延续(continuation),和柯里化(currying)这些概念看起来是这么的陌生,同我们熟悉的if.else.while没有任何的相似之
比较不错的函数式JavaScript编程指南教程

你是否知道JavaScript其实也是一个函数式编程语言呢?本指南将教你如何利用JavaScript的函数式特性. 要求:你应当已经对JavaScript和DOM有了一个基本的了解. 写这篇指南的目的是因为关于JavaScript编程的资料太多了但是极少的资料提到了JavaScript的函数式特性.在本指南中,我只会讲解这些基本知识而不会深入其它的函数式语言或这是Lambda算子. 你可以点击所有的例子然后你所看到的代码就会被执行,这样就可以令指南变得具有交互性.你也可以使用这个沙箱来尝试. 第
函数式JavaScript编程指南

简介你是否知道JavaScript其实也是一个函数式编程语言呢?本指南将教你如何利用JavaScript的函数式特性. 要求:你应当已经对JavaScript和DOM有了一个基本的了解. 写这篇指南的目的是因为关于JavaScript编程的资料太多了但是极少的资料提到了JavaScript的函数式特性.在本指南中,我只会讲解这些基本知识而不会深入其它的函数式语言或这是Lambda算子. 你可以点击所有的例子然后你所看到的代码就会被执行,这样就可以令指南变得具有交互性.你也可以使用这个沙箱来尝试
Python函数式编程指南（四）：生成器详解

4. 生成器(generator) 4.1. 生成器简介首先请确信,生成器就是一种迭代器.生成器拥有next方法并且行为与迭代器完全相同,这意味着生成器也可以用于Python的for循环中.另外,对于生成器的特殊语法支持使得编写一个生成器比自定义一个常规的迭代器要简单不少,所以生成器也是最常用到的特性之一. 从Python 2.5开始,[PEP 342:通过增强生成器实现协同程序]的实现为生成器加入了更多的特性,这意味着生成器还可以完成更多的工作.这部分我们会在稍后的部分介绍. 4.2. 生成
Javascript & DHTML 实例编程（教程）（三）初级实例篇1—上传文件控件实例

效果DEMO:http://www.never-online.net/tutorial/js/upload/Javascript & DHTML 实例编程(教程)(三),初级实例篇-上传文件控件实例上章基本上把要交代的基本知识都说了一些,今天终于开始写代码了:D首先来做一个实例,批量上传的UI控件.以后一般做的示例也是以UI控件为主的.都是封装成Object或者用Function封装成"Class"类. 也许对于单单看前几章的朋友来说这个例子过于深奥了,但是不用担心,一步步来解
Python函数式编程指南:对生成器全面讲解

生成器是迭代器,同时也并不仅仅是迭代器,不过迭代器之外的用途实在是不多,所以我们可以大声地说:生成器提供了非常方便的自定义迭代器的途径. 这是函数式编程指南的最后一篇,似乎拖了一个星期才写好,嗯-- 1. 生成器(generator) 1.1. 生成器简介首先请确信,生成器就是一种迭代器.生成器拥有next方法并且行为与迭代器完全相同,这意味着生成器也可以用于Python的for循环中.另外,对于生成器的特殊语法支持使得编写一个生成器比自定义一个常规的迭代器要简单不少,所以生成器也是最常用到的
JavaScript编程设计模式之构造器模式实例分析

本文实例讲述了JavaScript编程设计模式之构造器模式.分享给大家供大家参考,具体如下: 经典的OOP语言中,构造器(也叫构造函数)是一个用于初始化对象的特殊方法.在JS中,因为一切皆对象,对象构造器经常被提起. 对象构造器用于建立制定类型(Class)的对象,可以接受参数用于初始化对象的属性和方法. 对象建立在JS中,有三个常用的方法用于建立对象: //1, 推荐使用 var newObject = {}; //2, var newObject = Object.create( null
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解

本文实例讲述了JavaScript编程设计模式之观察者模式.分享给大家供大家参考,具体如下: 简介简单的解释观察者模式,就是一个对象(subject)维护一个依赖他的对象(observers)列表,当自身状态发生变化时,自动通知所有观察者对象.当某个对象不需要获得通知时,可以从对象列表中删除掉. 从上面的解释中我们可以提炼出三个componet: Subject, ObserverList和Observer,用JS实现很简单: function ObserverList(){ this.obs
Dojo Javascript 编程规范规范自己的JavaScript书写

前言良好的JavaScript书写习惯的优点不言而喻,今天彬Go向大家推荐Dojo Javascript 编程规范,相当不错的 Javascript 编程风格规范,建议大家可以借鉴一下此规范编写 Javascript.感谢i.feelinglucky的翻译. 序 Any violation to this guide is allowed if it enhances readability. 所有的代码都要变成可供他人容易阅读的. 快读参考核心 API 请使用下面的风格: 结构规则注释
Javascript学习指南

javascript入门太容易了,导致几乎人人随便看看就能上手,零基础的人学个三五天都能对外宣称自己掌握了js.可是真正掌握js是一件很难的事情.如果在初学一门语言的时候第一想到的是问别人,是很难取得进步的.因为得到答案太容易,而不会去想为什么.而且说实话,js并不适合作为第一门编程语言,它兼容并包,容错性高,但这也意味着一但出错你就很难找到错误的原因.另一方面js有一些优秀的特性对于没有编程经历的人来说也很难发现. 如果你真想学好js,我有个大概的自学轨迹供你们参考. 第一步,学习w3scho
javascript编程起步（第三课）

javascript编程起步(第三课) 第三课终于和大家见面了, 大家要感谢 Actions 的辛勤劳动啊, 好好利用论坛给大家提供的资源和教程, 希望大家一起学习提高 :D 大家有什么意见, 建议或者想法, 可以到本版的教程问答区或站务管理版的建议或意见去发表, 我们会及时给您反馈 :) 下面是今天的学习重点: A.补充上课的变量内容 B.if语句的基本语法 C.window.com()基本用法 A.变量 1.变量的类型规则 javascript是无类型的,他的变量可以放任何数据类型的