JavaScript高阶函数的学习笔记

在Javascript中,有高阶函数的概念,因而很适合函数式编程。那神马是高阶函数呢?没有神马具体的定义,但高阶函数有两个显著的特征:。用函数做参数或返回一个函数。

函数作为参数
众所周知,函数是Javascript中的一等公民,不仅能被赋值,也能和普通变量一样,作为函数的参数。

如果你有Javascript的Web编程经验或者是一个前端开发者,就会经常碰到回调函数。在某个操作完成之后会被执行的函数就被称为回调函数。通常,回调函数都是匿名的,并作为最后一个函数传递给调用者。

由于Javascript是单线程的,也就意味着,同一时刻只有一个操作在进行,其它操作则在队列中等候当前操作的完成。在支持高阶函数特性的语言中,采取的策略是传递一个将在父函数操作完成之后被执行的函数,可以允许异步行为,因此,在等待响应时,脚本可以继续执行。

这在Web的编程中是非常有用的,因为脚本可能在某处会向服务器发送一个Ajax请求,并且需要处理服务器的响应,而由于网络延迟或者服务器处理时间是不可控的,我们并不知道响应会什么时候到达。Node.js会频繁使用回调来充分利用服务器资源。

举个粟子,看看下面的Javascript代码片段,给按钮添加一个点击监听:

<button id="clicker">So Clickable</button>
document.getElementById("clicker").addEventListener("click", function() {
  alert("you triggered " + this.id);
});

脚本中使用匿名函数来触发弹框。当然,也可以单独定义一个函数,并把函数名作为参数传递给addEventListener:

var proveIt = function() {
  alert("you triggered " + this.id);
};
document.getElementById("clicker").addEventListener("click", proveIt);

注意,传递的是proveIt而不是proveIt()。当你通过不带括号的名字传递一个函数时,传递的是函数对象本身;而传递的名字待括号时,则传递的是函数执行后的结果。

函数作为结果返回
除了可以将函数作为参数之外,Javascript还允许一个函数将另一个函数作为结果返回。这很有意思,因为函数是一个对象,它可以返回任何其他值。

但是将函数作为结果返回有神马含义呢?将一个函数定义为另一个函数的返回值,可以允许你创建一个函数,这个函数作为新函数的模板。这就打开了Javascript函数编程的另一道大门。

举个粟子,假设你对于所有文章中的专有名词 Millennials 感到厌烦,想要用 Snake People 替换所有的 Millennials。一时冲动,你可能只写了一个简单地文本替换函数:

var snakify = function(text) {
  return text.replace(/millenials/ig, "Snake People");
};
console.log(snakify("The Millenials are always up to something."));
// The Snake People are always up to something.

对于这种特定情况,这是可行的。但某一天,你有对 Baby Boomers 感到厌恶了,也想调用一个简单地函数用其它文本替换掉可恶的 Baby Boomers 。虽然函数实现很简单,但是你又不想重复已经写过的代码:

var hippify = function(text) {
  return text.replace(/baby boomers/ig, "Aging Hippies");
};
console.log(hippify("The Baby Boomers just look the other way."));
// The Aging Hippies just look the other way.
由于函数可以作为结果被返回,因而Javascript可以提供一种更方便的方式:

var attitude = function(original, replacement, source) {
  return function(source) {
    return source.replace(original, replacement);
  };
};
var snakify = attitude(/millenials/ig, "Snake People");
var hippify = attitude(/baby boomers/ig, "Aging Hippies");
console.log(snakify("The Millenials are always up to something."));
// The Snake People are always up to something.
console.log(hippify("The Baby Boomers just look the other way."));
// The Aging Hippies just look the other way.

高阶函数在Javascript中是很常见的,其实我们都已经在使用高阶函数了。

时间: 2024-09-15 18:47:38

JavaScript高阶函数的学习笔记的相关文章

Javascript 高阶函数使用介绍_javascript技巧

高阶函数(higher-order function)-如果一个函数接收的参数为或返回的值为函数,那么我们可以将这个函数称为高阶函数.众所周知,JavaScript是一种弱类型的语言:JavaScript的函数既不对输入的参数,也不对函数的输出值作强定义和类型检查,那么函数可以成为参数,也可以成为输出值,这就体现了JavaScript对高阶函数的原生支持. 一.参数为函数的高阶函数: function funcTest(f){ //简易判断一下实参是否为函数 if((typeof f)=="fu

Javascript 高阶函数使用介绍

  高阶函数(higher-order function)-如果一个函数接收的参数为或返回的值为函数,那么我们可以将这个函数称为高阶函数.众所周知,JavaScript是一种弱类型的语言:JavaScript的函数既不对输入的参数,也不对函数的输出值作强定义和类型检查,那么函数可以成为参数,也可以成为输出值,这就体现了JavaScript对高阶函数的原生支持. 一.参数为函数的高阶函数: ? 1 2 3 4 5 6 function funcTest(f){ //简易判断一下实参是否为函数 if

Javascript中回调函数的学习笔记

回调函数原理: 我现在出发,到了通知你" 这是一个异步的流程,"我出发"这个过程中(函数执行),"你"可以去做任何事,"到了"(函数执行完毕)"通知你"(回调)进行之后的流程 例子  代码如下 复制代码 1.基本方法 <script language="javascript" type="text/javascript">   function doSomethin

Javascript 是你的高阶函数(高级应用)_javascript技巧

在通常的编程语言中,函数的参数只能是基本类型或者对象引用,返回值也只是基本数据类型或对象引用.但在Javascript中函数作为一等公民,既可以当做参数传递,也可以被当做返回值返回.所谓高阶函数就是可以把函数作为参数,或者是将函数作为返回值的函数.这两种情形在实际开发中有很多应用场景,本文是我在工作学习中遇到的几种应用场景的总结. 回调函数 代码复用是衡量一个应用程序的重要标准之一.通过将变化的业务逻辑抽离封装在回调函数中能够有效的提高代码复用率.比如ES5中为数组增加的forEach方法,遍历

Javascript:是你的高阶函数

在通常的编程语言中,函数的参数只能是基本类型或者对象引用,返回值也只是基本数据类型或对象引用.但在Javascript中函数作为一等公民,既可以当做参数传递,也可以被当做返回值返回.所谓高阶函数就是可以把函数作为参数,或者是将函数作为返回值的函数.这两种情形在实际开发中有很多应用场景,本文是我在工作学习中遇到的几种应用场景的总结. 回调函数 代码复用是衡量一个应用程序的重要标准之一.通过将变化的业务逻辑抽离封装在回调函数中能够有效的提高代码复用率.比如ES5中为数组增加的forEach方法,遍历

高阶函数与JavaScript

简单的 JavaScript? Web 语言 JavaScript 的原意被很多人曲解了,绝大部分的人(包括以前我在做项目的时候)其实都没有正确地使用 HTML 和 CSS.几乎没有人是通过FP的特性规范来学习 JavaScript 的,他们都是通过流行的 OO 设计教材和阅读以前遗留的代码来学习的.很遗憾的是 OO 这两种学习途径对于他们真正理解 JavaScript 理念都没有多少帮助,甚至还存在着大量的误导.比如在编码中仍未摆脱大量的过程式编程,或着更"高级一点",大量使用伪类来

JavaScript权威设计--JavaScript函数(简要学习笔记十一)

1.函数调用的四种方式 第三种:构造函数调用 如果构造函数调用在圆括号内包含一组实参列表,先计算这些实参表达式,然后传入函数内.这和函数调用和方法调用是一致的.但如果构造函数没有形参,JavaScript构造函数调用的语法是允许省略实参列表和圆括号的. 如: var o=new Object(); //->等价于 var o=new Object;   第四种:使用call()与apply()间接调用(放在后面详细说明)   2.函数的实参与形参--可选形参 先看一个例子: function g

JavaScript权威设计--JavaScript函数(简要学习笔记十)

1.函数命名规范 函数命名通常以动词为前缀的词组.通常第一个字符小写.当包含多个单词时,一种约定是将单词以下划线分割,就像"like_Zqz()". 还有一种就是"likeZqz()".有些些函数是用作内部用的或者为私有函数通常以一条下划线为前缀,就像"_zqzName()".   2.以表达式方式定义的函数 如: var zqz=function (){ return "zhaoqize"; } 在使用的时候必须把它赋值给一

javascript之典型高阶函数应用介绍二_javascript技巧

前言 在前一篇文章javascript之典型高阶函数中主要实现了几个典型的functional函数.文章最后也提出了疑问,为啥那样的实现与F#之类的函数式语言"不太一样"呢?今天来试试更"函数式"的实现. 另一种实现 同样地,尝试对之前实现的函数做一些改动,把for循环去掉.如何去掉呢?这里先要引入一个集合的归纳法定义: 一个集合要么是空集,要么是一个数与一个集合组成的数对从定义可以看到,每一个集合都可以看作为一个数和一个集合的对.例如:{1,2,4,5} 可以认为