JS中的 回调函数(callback)

1.什么是回调函数(callback)呢?

把函数当作一个参数传到另外一个函数中,当需要用这个函数是,再回调运行()这个函数.

回调函数是一段可执行的代码段,它作为一个参数传递给其他的代码,其作用是在需要的时候方便调用这段(回调函数)代码。(作为参数传递到另外一个函数中,这个作为参数的函数就是回调函数)

理解:函数可以作为一个参数传递到另外一个函数中。

    <script>function add(num1, num2, callback) {var sum = num1 + num2;callback(sum);}function print(num) {console.log(num);}add(1, 2, print); //3</script>

分析:add(1, 2, print);中,函数print作为一个参数传入到add函数中,但并不是马上起作用,而是var sum = num1 + num2;运行完之后需要打印输出sum的时候才会调用这个函数。(这个作为参数传递到另外一个函数中,这个作为参数的函数就是回调函数.

匿名回调函数:

   

 <script>function add(num1, num2, callback) {var sum = num1 + num2;callback(sum);}add(1, 2, function (sum) {console.log(sum); //=>3});</script>

2.回调函数有哪些特点?

1.不会立即执行

回调函数作为参数传递给一个函数的时候,传递的只是函数的定义并不会立即执行。和普通的函数一样,回调函数在调用函数数中也要通过()运算符调用才会执行。

2.回调函数是一个闭包

回调函数是一个闭包,也就是说它能访问到其外层定义的变量。

3.执行前类型判断

在执行回调函数前最好确认其是一个函数。
 

    <script>function add(num1, num2, callback) {var sum = num1 + num2;//判定callback接收到的数据是一个函数if (typeof callback === 'function') {//callback是一个函数,才能当回调函数使用callback(sum);}}</script>

3.回调函数中this的指向问题

注意在回调函数调用时this的执行上下文并不是回调函数定义时的那个上下文,而是调用它的函数所在的上下文。

举例:

    <script>function createData(callback){callback();}var obj ={data:100,tool:function(){createData(function(n){console.log(this,1111);  //window 1111})   }}obj.tool();</script>

分析:this指向是 离它最近的或者嵌套级别的 function/方法的调用者,这里离它最近的function是

function(n),会回到上面的callback()中,这时候调用者就不是obj而是window。

 解决回调函数this指向的方法1:箭头函数

回调函数(若回调函数是普通函数时)当参数传入另外的函数时,若不知道这个函数内部怎么调用回调函数,就会出现回调函数中的this指向不明确的问题(就比如上面例子中this指向的不是obj而是window)。所以 把箭头函数当回调函数,然后作为参数传入另外的函数中就不会出现this指向不明的问题。
 

    <script>function createData(callback){callback();}var obj ={data:100,tool:function(){createData((n)=>{this.data = n;})   }}obj.tool();console.log(obj.data); </script>

分析:回调函数用箭头函数写之后,this指向很明确,就是 离它最近的或者嵌套级别的 function/方法的调用者,所以这里是 obj 。

解决回调函数this指向的方法2:var self = this;

    <script>function createData(callback){callback(999);}var obj ={data:100,tool:function(){var self = this;   //这里的this指向obj,然后当一个变量取用createData(function(n){self.data = n;})   }}obj.tool();console.log(obj.data);</script>

4.为什么要用到回调函数?
有一个非常重要的原因 —— JavaScript 是事件驱动的语言。这意味着,JavaScript 不会因为要等待一个响应而停止当前运行,而是在监听其他事件时继续执行。来看一个基本的例子:

   <script>function first() {console.log(1);}function second() {console.log(2);}first();second();</script>


 分析:正如你所料,first 函数首先被执行,随后 second 被执行 —— 控制台输出:1  2

但如果函数 first 包含某种不能立即执行的代码会如何呢?例如我们必须发送请求然后等待响应的 API 请求?为了模拟这种状况,我们将使用 setTimeout,它是一个在一段时间之后调用函数的 JavaScript 函数。我们将函数延迟 500 毫秒来模拟一个 API 请求,新代码长这样:

   

<script>function first() {// 模拟代码延迟setTimeout(function () {  //所以function(){console.log(1)}是回调函数console.log(1);}, 500);}function second() {console.log(2);}first();second();</script>


分析:这里 function(){console.log(1)}函数当作一个参数传入setTimeout函数中,因为setTimeout是官方提供得一个函数,里面有很多复杂的业务程序,所以函数 function(){console.log(1)}传入后,不一定马上运行,要setTimeout里面要运行到function(){console.log(1)}时才会运行该函数参数,那是不是整个程序就一直等setTimeout运行?不是的!!!

整个程序运行结果为: 2  1 ,并不是原先的1 2 .即使我们首先调用了 first() 函数,我们记录的输出结果却在 second() 函数之后。

这不是 JavaScript 没有按照我们想要的顺序执行函数的问题,而是 JavaScript 在继续向下执行 second() 之前没有等待 first() 响应的问题。回调正是确保一段代码执行完毕之后再执行另一段代码的方式。

5.回调函数和异步操作的关系是什么?回调函数是异步么?

定义:回调函数被认为是一种高级函数,一种被作为参数传递给另一个函数的高级函数。回调函数的本质是一种模式(一种解决常见问题的模式),因此回调函数也被称为回调模式。 

简而言之:一个函数在另一个函数中被调用。而且可以当参数传给其他函数。

所以: 回调函数和异步操作的关系是没有关系!!! 

那为什么很多的异步操作都有回填函数啊??

问:你所知道的异步操作,是回调的作用么???  并不是。

回调:更多的可以理解为一种业务逻辑把           异步编程:JS代码的执行顺序       

简单理解:callback 顾名思义  打电话回来的意思

eg1:你点外卖,刚好你要吃的食物没有了,于是你在店老板那里留下了你的电话,过了几天店里有了,店员就打了你的电话,然后你接到电话后就跑到店里买了。在这个例子里,你的电话号码就叫回调函数,你把电话留给店员就叫登记回调函数,店里后来有货了叫做触发了回调关联的事件,店员给你打电话叫做调用回调函数,你到店里去取货叫做响应回调事件。

eg2:再比如,你发送一个axios 请求,请求成功之后,触发成功的回调函数,请求失败触发失败的回调函数。这里面的回调函数更像是一个工具,后台通过这个工具告诉你,你成功了抑或是失败了。这里面的所有异步操作都和回调没关系,真正的异步是then方法。
 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/199484.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

香港云服务器计算型和通用型的区别

在当今数字化时代&#xff0c;云服务器作为企业级应用的核心设备&#xff0c;其性能和类型对于企业的运营和数据处理至关重要。在常见的香港云服务器类型中&#xff0c;通用型和计算型是最为常见的两种。那么&#xff0c;这两种云服务器到底有什么区别呢? 设计目标和应用场景不…

HarmonyOS开发基础(一)

HarmonyOS开发基础&#xff08;一&#xff09; // &#xff1a;装饰器&#xff1a;用来装饰类结构、方法、变量 Entry // Entry&#xff1a;标记当前组件为入口组件 Component // Component&#xff1a;标记为自定义组件 // struct&#xff1a;自定义组件&#xff0c;可复用的…

【LeetCode】692. 前K个高频单词

692. 前K个高频单词 描述示例解题思路及事项思路一思路二 描述 给定一个单词列表 words 和一个整数 k &#xff0c;返回前 k 个出现次数最多的单词。 返回的答案应该按单词出现频率由高到低排序。如果不同的单词有相同出现频率&#xff0c; 按字典顺序 排序 示例 示例1 输…

电力校准平台

介绍 明确电力校准溯源平台的需求,包括设备管理、校准流程、数据存储、数据分析、安全保障、用户管理、系统管理和报告生成等方面的需求。通过清晰定义需求,为后续系统开发提供准确依据,确保系统的顺利实施和稳定运行。 设备管理 2.1 设备信息管理 平台应具备设备信息管理功…

Python实现FA萤火虫优化算法优化BP神经网络回归模型(BP神经网络回归算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 萤火虫算法&#xff08;Fire-fly algorithm&#xff0c;FA&#xff09;由剑桥大学Yang于2009年提出 , …

15.Servlet [一篇通]

文章目录 1.Servlet 是什么2.第一个 Servlet 程序2.1创建项目2.2引入依赖2.3创建目录2.4编写代码2.5打包程序2.6部署程序2.7验证程序 3.更方便的部署方式3.1安装 Smart Tomcat 插件3.2配置 Smart Tomcat 插件 4.访问出错怎么办?4.1出现 4044.2出现 4054.3出现 5004.4出现 &quo…

移动端APP测试方法

1 APP测试基本流程 1.1 测试周期 测试周期可按项目的开发周期来确定测试时间&#xff0c;一般测试时间为两三周&#xff08;即15个工作日&#xff09;&#xff0c;根据项目情况以及版本质量可适当缩短或延长测试时间。正式测试前先向主管确认项目排期。 1.2 测试资源 测试任…

冬天来了,波司登的高端化“春天”不远了?

最近&#xff0c;羽绒服频繁“贵”上热搜。 在众多热搜词条中&#xff0c;一条“国产羽绒服卖到7000元”的话题一度将波司登推上了舆论的风口浪尖。 对此&#xff0c;波司登在最新的业绩说明会上进行了回应&#xff0c;公司表示&#xff1a;“波司登旗下主品牌及子品牌将形成差…

mysql原理--InnoDB记录结构

1.InnoDB行格式 我们平时是以记录为单位来向表中插入数据的&#xff0c;这些记录在磁盘上的存放方式也被称为 行格式 或者 记录格式 。 设计 InnoDB 存储引擎的大叔们到现在为止设计了4种不同类型的 行格式 &#xff0c;分别是 Compact 、 Redundant 、Dynamic 和 Compressed 行…

Linux 5.15安全特性之ARM64 PAC

ARM64 PAC&#xff08;Pointer Authentication Code&#xff09;机制是ARM架构中引入的一种安全特性&#xff0c;旨在提供指针的完整性和安全性保护。它通过在指针中插入一段额外的代码进行签名&#xff0c;以验证指针的完整性&#xff0c;从而抵御缓冲区溢出和代码注入等攻击。…

抖音直播间购物小黄车的商品详情数据SKU接口轻松拿下

我们都知道&#xff0c;抖音直播购物车的商品链接只能是抖音小店的&#xff0c;如果没有开通抖音小店&#xff0c;还能添加小店链接吗&#xff1f; 也是可以的。 抖音直播小黄车的链接可以是自己的小店商品&#xff0c;也可以是别人的小店商品。 抖音直播上链接有两种方式&a…

在Redis中设置一个键值对并为其指定过期时间

在Redis中设置一个键值对并为其指定过期时间&#xff0c;可以使用 SET 命令结合 EXPIRE 命令来实现&#xff0c;或者直接使用 SETEX 命令。 以下是使用 SET 和 EXPIRE 命令的例子&#xff1a; SET mykey somevalue EXPIRE mykey 30上面的命令首先使用 SET 命令创建了一个名为…

大数据技术发展

▶1.大数据时代 美国互联网数据中心指出&#xff0c;互联网上的数据每年增长50%,每两年翻一番&#xff0c;目前世界上90%以上的数据是最近几年才产生的。此外&#xff0c;这些数据并非单纯是人们在互联网上发布的信息&#xff0c;85%的数据由传感器和计算机设备自动生成。全世…

centos7防火墙开启端口

1.查看防火墙状态 firewall-cmd --state如果返回的not running&#xff0c;那么需要先开启防火墙 2.开启关闭防火墙 systemctl start firewalld.service systemctl stop firewalld.service systemctl restart firewalld.service3.开放指定端口 firewall-cmd --zonepublic -…

MYSQL8用户权限配置详解

单位的系统性能问题需要把Mysql5升级到Mysql8&#xff0c;需要用到Mysql8的一些特性来提升系统的性能。 配置用户权限过程中发现一些问题&#xff0c;学习并记录一下。 目录 一、环境 二、MySQL8 用户权限 2.1 账号管理权限 2.1.1 连接数据库 2.1.2 账号权限配置 2.2 密码…

Container容器技术简介

本文介绍了容器技术出现背景&#xff0c;docker技术与容器编排技术的简单说明 背景 在传统项目的生产环境中&#xff0c;迁移一个用户态进程往往非常麻烦&#xff0c;因为一个用户态进程背后会附带这非常多例如函数库、中间件等的依赖项&#xff0c;但又没有像apt和yum一样的…

linux 僵尸进程 关闭看不见的进程

多卡训练&#xff0c;如果显存不够&#xff0c;程序会崩溃退出&#xff0c;但是gpu显存会一直占用。 nvidia-smi看不到相关进程&#xff0c;关闭进程方法&#xff1a; 目录 查询进程&#xff1a; 关闭方法 1: 使用 pkill 方法 2: 使用 ps, grep 和 awk 结合 kill 查询进程…

洗地机哪个牌子好用?洗地机希亦、石头、添可、西屋谁的清洁力更强?

洗地机的出现极大地改善了清洁过程&#xff0c;提高了效率&#xff0c;减少了人力投入。但随着市场上洗地机的种类和功能不断增加&#xff0c;人们可能会感到困惑&#xff0c;不知道如何选择适合自己需求的机器。为了帮助消费者更好地了解洗地机的选择&#xff0c;今天我将带大…

java21实战record

java程序员一直以如何让代码写的可维护性跟高&#xff0c;不论是框架还是代码都追求精益求精。 第一阶段&#xff1a;由于面向对象的要求&#xff0c;我们会将成员变量用私有属性修饰&#xff0c;但是&#xff0c;如果面临类中的成员变量比较多的情况下&#xff0c;修改会非常麻…

【python】包(package)与模块(module)、import、__name__与__main__

导入模块一般写在程序最前面&#xff0c;且顺序为&#xff1a;内置模块、第三方模块、自定义模块 一、模块&#xff08;module&#xff09;与包&#xff08;package&#xff09; 模块&#xff08;module&#xff09;可以理解为是一个.py文件&#xff0c;import 模块 相当于执行…