既然函数可以像其他数据那样赋值给某个个变量,可以被定义、删除、拷贝,那为什么就不能被当成参数传递给其他函数呢?

  下面的示例中,我们定义了一个以两个函数为参数的函数。该函数会分别执行这两个参数函数,并返回它们的返回值之和。 

function invoke_and_add(a,b){
return a() + b();
}

  现在让我们来简单定义一下这两个参与加法运算的函数,它们只是单纯地返回一个硬编码值: 

function one(){
return 1;
}
function two(){
return 2;
}

  下面,我们只需将这两个函数传递给目标函数 invoke_and_add(),就可以得到执行结果了:

  invoke_and_add(one ,two);

  3

  事实上,我们也可以直接用匿名函数来代替one()和two(),以作为目标函数的参数,例如:

  invoke_and_add(function(){return 1;},function(){return 2;})

  当我们将函数A传递给函数B,并由B来执行A时,A就成了一个回调函数(callback functions)。如果这时A还是一个无名函数,我们就称它为匿名回调函数。

  那么,应该什么时候使用回调函数呢?下面就让我们通过几个应用实例来示范一下回调函数的优势。

  * 它可以让我们在不做命名的情况下传递函数(这意味着可以节省全局变量)。

  * 我们可以将一个函数调用操作委托给另一个函数(这意味着可以节省一些代码编写工作)。

  * 它们也有助于提升性能。

  回调示例:

  在编程过程中,我们通常需要将一个函数的返回值传递给另一个函数。在下面的例子中,我们定义了两个函数:第一个multiplayByTwo(),该函数会通过一个循环将其所接受的三个参数分别乘以2,并以数组的形式返回结果;第二个函数addOne()只接受一个值,然后将它加1并返回即可。 

function multiplyByTwo(a,b,c){
var i,ar =[];
for (i=0;i<3;i++){
ar[i] = arguments[i]*2;
}
return ar;
} function addOne(a){
return a+1;
}

  现在,我们来测试一下这两个函数:

  multiplyByTwo(1,2,3);

  [2,4,6]

  addOne(100)

  101

  接下来,我们要实现这三个元素在两个函数之间的传递,这需要定义一个用于存储元素的数组。我们先从multiplyByTwo()的调用开始:

  var myarr =[];

  myarr=multiplyByTwo(10,20,30);

  [20,40,60]

  然后,用循环遍历每个元素,并将它们分别传递给addOne()。

  for(var i=0;i<3;i++){myarr[i] =addOne(myarr[i]);}

  myarr

  [21,41,61]

  如你所见,这段代码可以工作,但是显然还有一定的改善空间。特别是这里使用了两个循环,如果数据量很大或循环操作很复杂的话,开销一定不小。因此,我们需要将它们合二为一。这就需要对multiplyByTwo()函数做一些改动,使其接受一个回调函数,并在每次迭代操作中调用它。具体如下: 

function multiplyByTwo(a,b,c,callback)
{
var i,ar=[];
for(i=0;i<3;i++){
ar[i]=callback(arguments[i]*2);
}
return ar;
}

  函数修改完成之后,之前的工作只需要一次函数调用就够了,我们只需像下面这样将初始值和回调函数传递给它即可:

  myarr= multiplyByTwo(1,2,3,addOne);

  [3,5,7]

  我们还可以用匿名函数来代替addOne(),这样做可以节省一个额外的全局变量。

  myarr= multiplyByTwo(1,2,3,function(a){return a +1});

  [3,5,7]

  而且,使用匿名函数也更易于随时根据需求调整代码。例如:

  myarr = multiplyByTwo(1,2,3,function(a){return a +2});

  [4,6,8]

  

javascript 的回调函数的更多相关文章

  1. JavaScript Callback 回调函数

    JavaScript callback回调函数 你到一个商店买东西,刚好你要的东西没有货,于是你在店员那里留下了你的电话,过了几天店里有货了,店员就打了你的电话,然后你接到电话后就到店里去取了货.在这 ...

  2. Javascript之回调函数(callback)

    1.回调函数定义: 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方 ...

  3. JavaScript中回调函数的使用

    在JavaScript中,回调函数具体的定义为:函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A.我们就说函数A叫做回调函数.如果没有名称(函数表达式),就叫做匿名回调函数. ...

  4. 告诉你什么是javascript的回调函数

    函数也是对象 想弄明白回调函数,首先的清楚地明白函数的规则.在javascript中,函数是比较奇怪的,但它确确实实是对象.确切地说,函数是用Function()构造函数创建的Function对象.F ...

  5. JavaScript 之 回调函数的返回值给全局变量赋值问题

    jQuery 中,会遇到$.get(url,data,callback,type) 或 $.post(url,data,callback,type) 返回值给全局变量赋值的问题: 例如: <sc ...

  6. javascript的回调函数

    函数也是对象 想弄明白回调函数,首先的清楚地明白函数的规则.在javascript中,函数是比较奇怪的,但它确确实实是对象.确切地说,函数是用Function()构造函数创建的Function对象.F ...

  7. javascript的回调函数 同步 异步

    后一个任务等待前一个任务结束再执行.程序执行顺序与任务排列顺序一致的,同步的. 参考: http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%B ...

  8. Javascript-回调函数浅谈

    回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在特定 ...

  9. 什么是javascript的回调函数?

    回调函数(callback) 基本上每本书里都会提一提实际上我们几乎每天都在用回调函数,那么如果问你到底什么是回调函数呢? 1. 回调函数是作为参数传递给另一个函数 2. 函数运行到某种程度时,执行回 ...

  10. 【javascript】回调函数

    1. 定义 回调函数,即当条件满足时执行的函数.有三种方法实现调用回调函数 call 1)call 用法:call(thisObj, Obj) 主要区别:call 方法会将函数对象上下文修改为this ...

随机推荐

  1. centos7-每天定时备份 mysql数据库

    centos7-每天定时备份 mysql数据库 第一步:编写数据库备份脚本database_mysql_shell.sh #!/bin/bash DATE=`date +%Y%m%d%H%M` #ev ...

  2. Vue.js -- 过滤器

    VueJs中的过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/ ...

  3. 【poj2114】点分治(离线)

    boatherds 2s 64M by czy 求一颗树上距离为K的点对是否存在 输入数据 n,m 接下来n-1条边a,b,c描述a到b有一条长度为c的路径 接下来m行每行询问一个K 输出数据 对于每 ...

  4. 【GDKOI2016Day1T1-魔卡少女】【拆位】线段树维护区间内所有连续子区间的异或和

    题意:给出N个数,M个操作.操作有修改和询问两种,每次修改将一个数改成另一个数,每次询问一个区间的所有连续子区间的异或和.n,m<=100000,ai<=1000 题解: 当年(其实也就是 ...

  5. 【BZOJ】1609: [Usaco2008 Feb]Eating Together麻烦的聚餐

    [算法]动态规划 [题解]DP有个特点(递推的特点),就是记录所有可能状态然后按顺序转移. 最优化问题中DP往往占据重要地位. f[i][j]表示前i头奶牛,第i头改为号码j的最小改动数字,这样每头奶 ...

  6. bootstrap框架的搭建

    bootstrap框架 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快 ...

  7. Piggy-Bank(多重背包+一维和二维通过方式)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1114 题面: Problem Description Before ACM can do anythi ...

  8. [一] sqlinject bypass

    http://103.238.227.13:10087/?id=1 由源码来看是没有办法注入的,几乎都是过滤了的.但是经过测试加<>符号会被直接替换为空. 那么就可以借助此进行bypass ...

  9. thread_info&内核栈

    转载:http://blog.chinaunix.net/uid-22548820-id-2125152.html 之所以将thread_info结构称之为小型的进程描述符,是因为在这个结构中并没有直 ...

  10. device tree --- label

    [label:] <device node name>[@ unit-address] 為 device node 取 label name, 可以在其它位置使用 &label 存 ...