时间:2021-05-18
你是否知道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) );从这里可以得出一个结论,函数是一个值就像字符串、数字或数组一样。这还出现几个问题:
例:
这个例子演示了如何把函数作为参数传递。
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);现在你已经知道如何将函数作为值使用,那么你也应该试试!一个很好的例子是数组内建的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);对事件处理程序使用函数式编程也许是最直观的函数作为值得应用了。既然这样我们马上就演示一个例子。
简单的例子:;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上。
下面是关于函数式JavaScript编程的一些有趣的链接:
本节给大家展示一下JavaScript的未来。一个非常振奋人心的JavaScript特性——E4X,一个JavaScript中直接的XML支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
简介你是否知道JavaScript其实也是一个函数式编程语言呢?本指南将教你如何利用JavaScript的函数式特性。要求:你应当已经对JavaScript和D
本文实例讲述了JavaScript函数式编程(FunctionalProgramming)声明式与命令式。分享给大家供大家参考,具体如下:函数式编程属于声明式编
本文实例讲述了JavaScript函数式编程(FunctionalProgramming)纯函数用法。分享给大家供大家参考,具体如下:函数式编程鼓励我们多创建纯
JavaScript是函数式编程语言,支持高阶函数和闭包。函数式编程非常强大,可以写出非常简洁的代码。例如Array的map()和filter()方法:'use
JavaScript就其本质是函数式编程语言,是Lisp的后代,同时又加入了一下面向对象编程的元素,放弃了一些难懂的函数式语言的元素。函数式编程语言可以实现面向