理解javascript中的回调函数(callback)

 更新时间:2014年09月02日 12:15:35   投稿:junjie  
这篇文章主要介绍了理解javascript中的回调函数(callback),本文着重于对回调函数概念的理解,需要的朋友可以参考下

最近在看 express,满眼看去,到处是以函数作为参数的回调函数的使用。如果这个概念理解不了,nodejs、express 的代码就会看得一塌糊涂。比如:

复制代码 代码如下:

app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

app是对象,use是方法,方法的参数是一个带参的匿名函数,函数体直接在后面给出了。这段代码怎么理解呢?我们先来了解回调函数这个概念。
首先要了解,在 js 中,函数也是对象,可以赋值给变量,可以作为参数放在函数的参数列表中。比如:
复制代码 代码如下:

var doSomething = function(a,b)
{
 return a + b;
}

这段代码的意思是定义一个匿名函数,这个匿名函数除了没有名字之外,其他跟普通的函数没有什么两样。然后把匿名函数赋值给变量doSomething。接下来我们调用:
复制代码 代码如下:

console.log(doSomething(2,3));

这样会输出5。

回调函数,就是放在另外一个函数(如 parent)的参数列表中,作为参数传递给这个 parent,然后在 parent 函数体的某个位置执行。说来抽象,看例子:

复制代码 代码如下:

// To illustrate the concept of callback
var doit = function(callback)
{
    var a = 1,
        b = 2,
        c = 3;
    var t = callback(a,b,c);
    return t + 10;
};
var d = doit(function(x,y,z){
    return (x+y+z);
});
console.log(d);

先定义 doit 函数,有一个参数 callback。这个 callback 就是回调函数,名字可以任意取。看函数体,先定义三个变量 a,b,c。然后调用 callback 函数。最后返回一个值。

下面就调用 doit 函数了。要注意的是,刚才定义 doit 时,callback 并没有定义,所以刚才并不知道 callback 是干什么用的。这其实很好理解,我们平时定义函数的时候,参数也只是给出了一个名字,比如 a,在函数体中使用 a,但整个过程也并不知道 a 到底是什么,只有在调用那个函数的时候才指定 a 的具体值,比如2.回过头来,在调用 doit 的时候,我们就需要指定 callback 究竟是个什么东西了。可以看到,这个函数完成了一个 sum 功能。

上述代码的执行过程是:

调用 doit函数,参数是一个匿名函数;进入 doit 的函数体中,先定义 a,b,c,然后执行刚才的匿名函数,参数是 a,b,c,并返回一个 t,最后返回一个 t+10给 d。

回到最初的例子,app.use(...)是函数调用。我们可以想象,之前一定定义了一个 use 方法,只是这里没有给出。这两个例子一对比,就可以马上理解了。

在使用nodejs、express 的时候,不可能每个方法或函数我们都要找到它的函数定义去看一看。所以只要知道那个定义里面给 callback 传递了什么参数就行了。然后在调用方法或函数时,在参数里我们自己定义匿名函数来完成某些功能。

Over!

相关文章

  • 详谈js对url进行编码和解码(三种方式的区别)

    详谈js对url进行编码和解码(三种方式的区别)

    下面小编就为大家带来一篇详谈js对url进行编码和解码(三种方式的区别)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • express+mockjs实现模拟后台数据发送功能

    express+mockjs实现模拟后台数据发送功能

    这篇文章主要介绍了express+mockjs实现模拟后台数据发送功能,需要的朋友可以参考下
    2018-01-01
  • 微信小程序如何获取手机验证码

    微信小程序如何获取手机验证码

    这篇文章主要为大家详细介绍了微信小程序如何获取手机验证码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • 微信小程序中如何实现动态改变SVG颜色和尺寸

    微信小程序中如何实现动态改变SVG颜色和尺寸

    SVG可被非常多的工具读取和修改SVG与JPEG和GIF图像比起来,尺寸更小,且可压缩性更强,下面这篇文章主要给大家介绍了关于微信小程序中如何实现动态改变SVG颜色和尺寸的相关资料,需要的朋友可以参考下
    2022-07-07
  • event.srcElement 用法笔记e.target

    event.srcElement 用法笔记e.target

    event.srcElement 可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称。
    2009-12-12
  • JavaScript中的

    JavaScript中的"=、==、==="区别讲解

    今天小编就为大家分享一篇关于JavaScript中的"=、==、==="区别讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • 深入探讨JavaScript中Class的语法与使用

    深入探讨JavaScript中Class的语法与使用

    这篇文章将带大家深入探讨 class 在 JavaScript 中的作用、语法和使用方法,并与 ES5 构造函数进行对比,希望可以帮助大家更好地理解和应用类的概念
    2023-06-06
  • 了解一点js的Eval函数

    了解一点js的Eval函数

    之前只知道eval可以解析字符串,刚刚网上看了又了解了一点,这里贴出来,不懂的也看看哈
    2012-07-07
  • JavaScript中深拷贝与浅拷贝详解

    JavaScript中深拷贝与浅拷贝详解

    大家好,本篇文章主要讲的是JavaScript中深拷贝与浅拷贝详解,感兴趣的同学赶快来看一看吧,对你有帮助的话记得收藏一下
    2022-02-02
  • JSONP解决JS跨域问题的实现

    JSONP解决JS跨域问题的实现

    这篇文章主要介绍了JSONP解决JS跨域问题的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05

最新评论