浅谈javascript中的回调函数

要理解javascript中的回调函数,首先我们就要对javascript中的函数有一定的理解,所以我们先从javascript中函数谈起,讲讲它与其他语言中的函数有什么不同。


javascript中的函数

在javascript中,函数也是一种data,一种数据,只不过这种数据比较特殊,它里面存的是代码,而且这种data可以被调用执行。
自然,因为函数也是数据,所以就可以赋值给变量。
所以我们在javascript中经常看到这样的程序:

var f = function() {
      return 1;
}

我们将一个函数表达式赋值给了变量f,所以我们直接通过变量f来调用这个函数,只需要在f后面加上()就行了。
** javascript中函数的调用特征就是后面跟一对括号,里面可以有参数 **

js_function.PNG

如图中的执行代码,要调用某个函数,只需要在它的名字后面加一对括号即可,而且我们可以像变量一样使用函数,也就是说,我们可以将它拷贝给不同的变量。例如,我们将f拷贝给f2,那么f2也是一个函数变量,并且可以调用执行。

函数小结

现在我们javascript中的函数有以下特点:

  • 函数也是一种data,一种数据
  • 函数这种特殊的数据所包含的是代码
  • 它们可以被调用执行

匿名函数

正如前文所提的,

var f = function() {
      return 1;
}

这样的函数我们称之为匿名函数。可以和非匿名函数对比一下

function f() {
     return 1;
}

匿名函数有种特殊的用法就是,跟其他数据data一样作为参数传递给其他函数,因为我们已经知道函数在javascript中和其他数据data是一样的额,所以将函数作为参数就不难理解了。这样使用函数,就是** 回调函数 **。

回调函数

既然函数与任何可以被赋值给变量的数据是相同的,那么它们当然可以像其他数据那样来定义,删除,拷贝,以及当成参数传递给其他函数。
例如下面一个简单的例子

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

function one() {
    return 1;
}

function two() {
    return 2;
}

add(one,two);

这就是一个简单的回调函数的实例。add中的参数是两个函数,我们将one,two两个函数传进去,在add中执行one和two两个函数,这就是回调函数。更简洁的,我们还可以直接用匿名函数来简化上述代码

function add(a, b)
    return a() + b();
}

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

上述代码在控制台中运行的结果如下:

js.PNG

回调函数的使用

知道了什么是回调函数,我们来看一下回调函数的使用。
回调函数有什么优势呢?也就是为什么要使用回调函数

  • 它可以让我们在不做命名的情况下传递函数(这意味可以减少变量名的使用)
  • 我们可以讲一个函数调用操作委托给另一个函数(这意味着可以节省一些代码编写工作)
  • 有助于提升性能

回调函数实例

下面我们通过一个例子来看看回调函数使用和他的优势。

我们定义两个函数,一个是multiplyByTwo();这个函数一个循环将它接受的三个参数分别乘2,并以数组的形式返回结果;第二个函数addOne()只接受一个值,然后将它加1并返回。

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

现在假设我们有三个元素(1,2,3)我们现在摇奖它们先乘2,再分别加一,不考虑回调函数的话,那么我们可以这么做

var myarr = [
];
myarr = multiplyByTwo(1, 2, 3);
//然后再遍历数组,给每个元素加一
for (var i = 0; i < 3; i++) {
  myarr[i] = addOne(myarr[i]);
}

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

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

这样,我们只需要调用一次函数就可以了。

var myarr = mutiplyByTwo(1, 2, 3, addOne);
myarr

总结

我们从javascript中的函数讲起,讲了函数在javascript中和数据一样,可以赋值,删除,拷贝,自然也可以作为函数的参数,这样就引出了回调函数的概念,我们先通过一个简单的例子,介绍了回调函数,然后通过一个例子说明了回调函数使用的优势,可以简化代码,提高效率,并且是代码易于修改维护!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容

  • 在JavaScript中我们常听说回调函数,回调函数是一段可执行的代码段,它作为一个参数传递给其他的代码,其作用是...
    plainnany阅读 630评论 0 4
  • 函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。 上面代码检查函数l...
    呼呼哥阅读 3,353评论 0 1
  • //Clojure入门教程: Clojure – Functional Programming for the J...
    葡萄喃喃呓语阅读 3,616评论 0 7
  • 半夜惊醒,无睡意,当思念牵起泪水不断的流下,爸爸像是一家的主心骨,是家的疑聚力,没有爸爸了,感觉家的意义少了几分,...
    宋宁静阅读 194评论 0 0
  • 大学毕了业,哎,网上说的真对啊,毕业就失业,但是那么多人为啥是我啊 朋友圈到处晒名校的毕业证,毕业照 晒大公司...
    洋葱皮芽子阅读 260评论 0 0