JavaScript中的回调函数详细解析

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了回调函数的相关内容，包括了什么是回调函数、回调函数有哪些特点、回调函数中this指向问题，下面一起来看一下，希望对大家有帮助。

【相关推荐：JavaScript视频教程、web前端】

1.什么是回调函数（callback）呢？

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

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

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

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

匿名回调函数：

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

1.不会立即执行

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

2.回调函数是一个闭包

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

3.执行前类型判断

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

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

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

举例：

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

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

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

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

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

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

4.为什么要用到回调函数？

有一个非常重要的原因 ——JavaScript 是事件驱动的语言。这意味着，JavaScript 不会因为要等待一个响应而停止当前运行，而是在监听其他事件时继续执行。来看一个基本的例子：

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

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

分析:这里 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方法。

【相关推荐：JavaScript视频教程、web前端】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!