【一句话攻略】彻底理解JS中的回调(Callback)函数

2023-11-09

作为JS的核心,回调函数和异步执行是紧密相关的,也是必须跨过去的一道个门槛。

那么究竟什么是回调函数(Callback),其实回调函数并不复杂,明白两个重点即可:

1. 函数可以作为一个参数在另一个函数中被调用。

2. JS是异步编程语言,这就是说JS代码的执行顺序并不是从上至下按部就班完成的。大多数语言都是同步编程语言,比如现在我们有3行代码,那么系统一定是一行一行按顺序向下执行的,第一行执行完了,执行第二行,紧跟着最后执行第三行,你可能会说这不是废话吗?且慢,在JS里则不尽然,比如有3行代码,并不是排在最前面的代码就是最先执行完毕的,很有可能是最后一行语句最先执行完,然后排在最前面的那行反而是最后执行完毕的,所以我们说JS是异步编程语言。

下面以node.js为例,举一个例子保证你在3步之内搞清楚究竟什么叫回调函数:

STEP 1:

var fs = require("fs");
var c

function f(x) {
    console.log(x)
}

function writeFile() {
    fs.writeFile('input.txt', '我是通过fs.writeFile 写入文件的内容', function (err) {
        if (!err) {
            console.log("文件写入完毕!")
            c = 1
        }
    });
}

c = 0
writeFile()
f(c)

以上代码不难理解,就是设置一个全局变量c = 0,然后执行writeFile函数(也就是写入一个文件input.txt),这个函数里面有一行c = 1,函数执行完毕之后再跳出来调用f()函数,f()函数很简单,就是把打印一个变量,仅此而已。

按照 “正常” 逻辑,首先c=0,然后调用writeFile函数,该函数里面有一句c = 1,最后再调用f(c),又因为调用writeFile()是在f(c)之前,所以c=1这条语句肯定是会被执行到,那么结果应该是打印1,但是万万想不到,结果竟然是0,明明我们在writeFile函数里我们重新对c进行了赋值,为什么结果还是0呢?

因为程序运行到writeFile()这一行的时候,是一个比较耗时的IO操作,JS碰到这种操作并不会停在原地一直等待直到函数执行完毕,而是直接运行下一条代码(即f(c)),而此时 c = 1这一行代码其实并没有被执行到,所以打印出来的结果还是0 ! 

那你肯定会说,要解决这个问题还不容易,我们把调用f(c)也放进writeFile函数里面不就行了呗!这样就能保证c = 1之后再调用f(c)了吧?没错,就这么简单:

STEP 2:

var fs = require("fs");
var c

function f(x) {
    console.log(x)
}

function writeFile() { 
    fs.writeFile('input.txt', '我是通过fs.writeFile 写入文件的内容', function (err) {
        if (!err) {
            console.log("文件写入完毕!")
            c = 1
            f(c)
        }
    });
}

c = 0
writeFile() 

这个代码的逻辑不需要多说了吧,因为实在太简单了,就是把f(c)放进了writeFile()里面,那么c=1必然会被执行到,然后才执行f(c),不用多说,结果肯定是显示为1。但是改成这样并不完美,因为这么做就相当于将f()"焊死"在writeFile()里了,如果此处我最终想调用的函数不是f()而是别的其他函数咋整?难不成要写几个不同的writeFile(),而他们之间的区别仅仅是最后调用的那个函数不同?这样也太笨了吧,于是今天的主角:“关键字” callback 登场了。(准确地说callback并不真的是Javascript里的关键字,但是鉴于大家都约定成俗把callback这个单词作为回调函数的默认选择了,这里姑且就不严谨地称它为"关键字"吧)

STEP 3:

var fs = require("fs");

function f(x) {
    console.log(x)
}

function writeFile(callback) { //callback,表示这个参数不是一个普通变量,而是一个函数
    fs.writeFile('input.txt', '我是通过fs.writeFile 写入文件的内容', function (err) {
        if (!err) {
            console.log("文件写入完毕!")
            c = 1
            callback(c) // 因为我们传进来的函数名是f(),所以此行相当于调用一次f(c)
        }
    });
}
var c = 0
writeFile(f) // 函数f作为一个参数传进writeFile函数

经过改造后的代码出现了两次callback,第一个callback出现在writeFile的形参里,起定义的作用,表示这个参数并不是一个普通变量,而是一个函数,也就是前面所说的重点1,即所谓的“以函数为参数”。 第二个callback出现在c = 1下面,表示此处“执行”从形参传递进来的那个函数。这样一来,writeFile()函数在执行完毕之后到底调用哪个函数就变“活”了,如果我们想writeFile()函数执行完之后并不是像第二个例子那样只能调用f(),而是还有别的函数比如说x() y() z(),那么只需要写成 writeFile(x),writeFile(y)... 就行了。

我相信你已经看明白上面的代码,因为实在并不高深,那么我们现在开始用一句话攻略做一个总结:

在大多数编程语言中,函数的形参总是从外向内传递参数,但在JS中,如果形参碰到“关键字” callback 则完全相反,它表示从内向外反向调用某个外部函数。

PS: 此处并不一定非要写为“callback”,你可以任意写成abc, iloveyou...等等随你高兴。callback只是一种约定俗成的写法,它明确地告诉代码阅读者:此处是一个回调函数。

有时候,我们会看到一些函数的形参列表里直接嵌套一个函数的情况,其本质上仍然是回调函数,因为没有了函数名,所以也称匿名函数。

如本例如果要写成这种风格的话就是长成这样了:

var fs = require("fs");

function writeFile(callback) { 
    fs.writeFile('input.txt', '我是通过fs.writeFile 写入文件的内容', function (err) {
        if (!err) {
            console.log("文件写入完毕!")
            c = 1
            callback(c) 
        }
    });
}
var c = 0
writeFile(function (x) {
    console.log(x)
})

writeFile()函数不变,只是在调用它的时候,直接将函数体嵌在参数列表里了,其作用跟上一个例子完全一样。其实在本例中,fs.writeFile函数后面也有一个匿名回调函数 function (err) {},这个函数表示当文件写入完毕后,就回调它,如果在写入过程中出现了错误,则通过变量err携带出来。我相信有了前面的铺垫,您已经肯定能理解它的含义了,事实上这种写法在JS里是出现频率最高的主流风格。

【补充】在JS里,当然也并非所有操作都是异步的,比如for循环,无论这个for循环需要耗时多长,系统也一定会等它转完之后才会执行下面的语句。我所了解的会产生异步执行的操作大概有以下几种:

定时器、建立网络连接、读取网络流数据、向文件写入数据、Ajax提交、请求数据库服务,等等。

如果至此你还是没弄清楚到底什么是回调函数,那么绝不是您的问题,而一定是我的表达有不足之处,欢迎留言探讨!

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【一句话攻略】彻底理解JS中的回调(Callback)函数 的相关文章

随机推荐

  • 【手撕代码系列】JS手写实现深拷贝

    公众号 Code程序人生 分享前端所见所闻 深拷贝是在计算机科学中非常重要的概念 尤其是在处理数据结构和对象的时候 深拷贝的目的是创建一个新的对象 它有自己的内存空间 并且其中的所有值都是原始对象的副本 这样做的好处是 可以避免在修改新对象
  • java中字符型常量的表示方法_Java中的常量,常量的表现形式和进制的转换及有符号数据表示法(原码,反码,补码)...

    1 常量 在程序执行的过程中 其值不发生改变的量 分类 1 字面值常量 字符串常量 用双引号括起来内容 字符常量 用单引号括起来的内容 整数常量 所有整数 小数常量 所有小数 布尔常量 true 或 false 空常量 null 2 自定义
  • 游戏行业未来发展趋势分析?

    未来游戏的方向与趋势 今天听了 哥的课程 我更加深入的了解了游戏行业的整体发展历程 这对于我们这一群即将进入游戏行业的校招生而言 无疑是受益匪浅的一节课 我 一个刚刚准备进入游戏行业的小白 大致猜想了游戏未来的几个发展方向与趋势 我认为 游
  • 3椭圆曲线密码学:ECDH和ECDSA

    原文链接 Elliptic Curve Cryptography ECDH and ECDSA 这篇文章是ECC系列的第三篇 在之前的文章中 我们已经知道了椭圆曲线是什么 并且为了对椭圆曲线上的点做一些数学运算我们定义了群公理 然后我们将椭
  • 静态方法中调用非静态方法

    1 常见现象 静态static方法中不能直接调用非静态non static方法 但可以通过将对象引用传入静态方法内 进而再调用该对象非静态 non static 方法 在主函数 static方法 中 我们经常需要创建某个类的实例 再引用其非
  • Mysql高级部分

    1 索引 索引 index 是帮助Mysql高效获取数据的数据结构 索引的目的在于提高查询效率 可以类比字典 可以简单理解为 排好序的快速查找数据结构 在数据之外 数据库系统还维护着满足特定查找算法的数据结构 这些数据结构以某种方式引用 指
  • tslib1.4的交叉编译

    tslib是touch screen lib 即支持触摸屏的库文件 要交叉编译qte4 5 2 就必须先要编译tslib1 4 今天做了这个工作 记录一下 平台 VMware Centos5 4 交叉编译器 arm linux 3 4 1
  • windows下使用cmake编译c++

    好久没有更新博客了 最近在做c 相关的 编译起来确实很痛苦 所以心血来潮 继续更新一下 主要还是一些跨平台的库 比如zlib libpng opencv ffmpeg 编译工具使用mingw作为主要编译环境支持 使用msys进行编译 一 下
  • R语言实战笔记--第八章 OLS回归分析

    R语言实战笔记 第八章 OLS回归分析 标签 空格分隔 R语言 回归分析 首先 是之前的文章 数理统计里面的简单回归分析 这里简单回顾一下 简单回归分析的原理 最小二乘法 即使回归函数与实际值之差的平方和最小 所以它在R中也称为OLS模型
  • 人工智能可以用来预测人口增长吗?

    人工智能可以用来预测人口增长 利用人工智能技术 可以对历史人口数据进行分析 并根据这些数据建立预测模型 从而预测未来的人口增长趋势 此外 人工智能还可以用于预测人口结构变化 人口流动趋势等方面的问题 这些预测结果可以为政府制定人口政策提供参
  • java读写文件大全(字节流读取得方法)

    原文地址 http blog sina com cn s blog 6a4af8630101et2t html 使用Java操作文本文件的方法详解 摘要 最初java是不支持对文本文件的处理的 为了弥补这个缺憾而引入了Reader和Writ
  • Ubuntu下的终端产生多标签和多标签切换快捷键

    ctrl alt t是打开一个terminal ctrl shift t是在terminal中打开多个标签 在多个标签中切换的方法 方法1 alt 1 alt 2 alt 3 方法二 ctrl pageUp ctrl pageDown ct
  • 【vision transformer】DETR原理及代码详解(四)

    本节是 DETR流程及 构建backbone和position embedding 相关部分的代码解析 一 DETR代码流程 STEP 1 Create model and criterion 构建模型和标准 STEP 2 Create t
  • IPv4和IPv6的互操作性

    概述 在IPv4到IPv6发展的过度阶段 必然出现v4和v6主机之间互操作的问题 下面从机制层面讨论互操作的可能性 并假设主机之间网络路由已经打通 IPv4客户端访问IPv6服务端 IPv4客户端访问IPv6服务端指的是服务端是双栈主机 客
  • OpenCV(二)——图像基本处理(二)

    目录 2 图像的几何变换 2 1 图像平移 2 2 图像缩放 2 3 图像旋转 2 4 仿射变换 2 5 透视变换
  • 电脑开机全是英文进不了系统怎么办

    现在工作都离不开电脑 但是有时候电脑罢工了 电脑开机全是英文进不了系统怎么办呢 下面就和大家讲讲电脑开机全是英文进不了系统解决办法吧 装机吧 电脑一键重装系统领域装机大师 重装系统xp win7 win8 win10 win11 怎么能缺少
  • python毕业设计基于django中小学信息技术课程考试系统

    文末获取资源 收藏关注不迷路 文章目录 一 项目介绍 二 主要使用技术 三 研究内容 四 核心代码 五 文章目录 一 项目介绍 通篇文章的撰写基础是实际的应用需要 然后在架构系统之前全面复习大学所修习的相关知识以及网络提供的技术应用教程 以
  • Neo4j 融资 3.25 亿美元,数据库史上最大的一笔投资

    加州圣马提奥 2021年6月17日 Neo4j图形技术的领先者 今天宣布了一轮F系列融资 这是一项3 25亿美元投资的一部分 亚拉齐奥 RF Pa GV 前称谷歌风投 今天的交易代表了对私人数据库公司的最大投资 使Neo4j的估值超过20亿
  • 什么是.NET?什么是.NET Core?.NET和.NET Core区别又是什么呢?

    本文首发于码友网 什么是 NET 什么是 NET Core NET和 NET Core区别又是什么呢 概述 对于 NET平台的初学者来说 有时候比较困惑 什么是 NET 什么是 NET Core NET和 NET Core区别又是什么呢 确
  • 【一句话攻略】彻底理解JS中的回调(Callback)函数

    作为JS的核心 回调函数和异步执行是紧密相关的 也是必须跨过去的一道个门槛 那么究竟什么是回调函数 Callback 其实回调函数并不复杂 明白两个重点即可 1 函数可以作为一个参数在另一个函数中被调用 2 JS是异步编程语言 这就是说JS