在函数体中,函数必须将一个值返回给调用方。遇到 return 语句后,该函数将会停止执行。在函数内部,参数将会充当局部变量。同样,在函数内部声明的变量是该函数的局部变量。局部变量只能在该函数内访问,因此具有相同名称的变量可以轻松地用于不同的函数。! P( C @$ b" d* W6 m, h p* r
调用一个函数1 ~* E# ~8 Y/ m q7 s% J
在下列任何一种情况下,将调用之前声明的函数: 8 U; w+ t3 j& }% r
发生事件时,例如,用户单击按钮,或者用户从下拉列表中选择某些选项等等。
从 javascript 代码中调用该函数时。
该函数可以自动调用。& E7 q6 g. O6 P, R* c
() 运算符调用该函数。 . }& W& f4 Z+ w三、什么是回调函数?3 t) u7 Y' k' x) y3 G) l
按照 MDN 的描述:回调函数是作为参数传给另一个函数的函数,然后通过在外部函数内部调用该回调函数以完成某种操作。让我用人话解释一下,回调函数是一个函数,将会在另一个函数完成执行后立即执行。回调函数是一个作为参数传给另一个 JavaScript 函数的函数。这个回调函数会在传给的函数内部执行。 * e8 o2 J; g# K b; _ 在 JavaScript 中函数被看作是一类对象。对于一类对象,我们的意思是指数字、函数或变量可以与语言中的其他实体相同。作为一类对象,可以将函数作为变量传给其他函数,也可以从其他函数中返回这些函数。 6 a1 m2 m) h; Y) t 可以执行这种操作的函数被称为高阶函数。回调函数实际上是一种模式。“模式”一词表示解决软件开发中常见问题的某种行之有效的方法。最好将回调函数作为回调模式去使用。, a" p9 f' L' `; V }# J8 W 四、为什么我们需要回调" J& Z+ L2 ?8 n. l
客户端 JavaScript 在浏览器中运行,并且浏览器的主进程是单线程事件循环。如果我们尝试在单线程事件循环中执行长时间运行的操作,则会阻止该过程。从技术上讲这是不好的,因为过程在等待操作完成时会停止处理其他事件。7 g) q, S h/ q/ \7 H8 y: }
例如,alert 语句被视为浏览器中 javascript 中的阻止代码之一。如果运行 alert,则在关闭 alert 对话框窗口之前,你将无法在浏览器中进行任何交互。为了防止阻塞长时间运行的操作,我们使用了回调。 9 k( ]7 r: @ p% t6 h* j$ l 让我们深入研究一下,以便使你准确了解在哪种情况下使用回调。8 f/ M# Q1 ?; w* d1 e2 g: j3 d% d
; D7 A- @4 P5 p
在上面的代码片段中,首先执行 getMessage()函数,然后执行 displayMessage() 。两者都在浏览器的控制台窗口中显示了一条消息,并且都立即执行。' A2 w0 S, V3 V# l
在某些情况下,一些代码不会立即执行。例如,如果我们假设 getMessage() 函数执行 API 调用,则必须将请求发送到服务器并等待响应。这时我们应该如何处理呢? ; f: Q r6 m _' s1 s7 w: f五、如何使用回调函数 8 j1 M1 i3 m2 F( p 与其告诉你 JavaScript 回调函数的语法,不如在前面的例子中实现回调函数更好。修改后的代码段显示在下面的截图中。. q# q! z& e) ^! | 9 `# u9 P7 {! N 为了使用回调函数,我们需要执行某种无法立即显示结果的任务。为了模拟这种行为,我们用 JavaScript 的 setTimeout() 函数。该函数会暂停两秒钟,然后在控制台窗口中显示消息“ Hi,there”。7 X8 }/ \: D6 l3 x8 \
“显示的消息”将被显示在浏览器的控制台窗口中。在这种情况下,首先,我们需要等待 getMessage() 函数。成功执行此函数后,再执行 displayMessage() 函数。& H3 |0 l+ L" a; n0 z
回调的工作方式3 D& c: Q7 L1 L4 M7 y
从上一个例子可以看到,在 getMessage() 函数中,我们传递了两个参数。第一个参数是 msg 变量,该变量显示在浏览器的控制台窗口中,第二个参数是回调函数。 . r1 Z6 q# T/ C- M0 u" O& t: @& |* t 现在,你可能想知道为什么将回调函数作为参数进行传递 —— 要实现回调函数,我们必须将一个函数作为参数传给另一个函数。 0 I8 M6 n2 L" t( y 在 getMessage() 完成任务后,我们将调用回调函数。之后,当调用 getMessage() 函数时,将引用传给displayMessage() 函数,该函数就是回调函数。 - {) w9 `% \% w! B 注意,当调用 getMessage() 函数时,我们仅将其引用传给 displayMessage() 函数。这就是为什么你不会在它旁边看到函数调用运算符,也就是() 符号。 ) D- X- | ?1 x5 w5 V* J六、Javascript 回调是异步的吗? * t' ^ ~& n m/ j$ i JavaScript 被认为是单线程脚本语言。单线程是指 JavaScript 一次执行一个代码块。当 JavaScript 忙于执行一个块时,它不可能移到下一个块。换句话说,我们可以认为 JavaScript 代码本质上总是阻塞的。但是这种阻塞性使我们无法在某些情况下编写代码,因为在这些情况下我们没有办法在执行某些特定任务后立即得到结果。 3 j3 R. v0 Y) c o6 p* w' Y* O我谈论的任务包括以下情况: ( k0 I9 b- W7 X) Q
通过对某些端点进行 API 调用来获取数据。
通过发送网络请求从远程服务器获取一些资源(例如,文本文件、图像文件、二进制文件等)。; n1 w( n& `6 U0 C7 g$ X4 U
为了处理这些情况,必须编写异步代码,而回调函数是处理这些情况的一种方法。所以从本质上上说,回调函数是异步的。) W Z1 I1 s5 @. m! ^2 C 七、Javascript 回调地狱6 O/ l0 |3 p% T( `9 _1 U3 l
当多个异步函数一个接一个地执行时,会产生回调地狱。它也被称为厄运金字塔。假设你要获取所有 Github 用户的列表。然后在用户中搜索 JavaScript 库的主要贡献者。再然后,你想要在用户中获取姓名为 John 的人员的详细信息。8 }& W7 E' c) N( A6 ?, {
为了在回调的帮助下实现这个功能,代码应该如下所示: 8 l( r& }0 @3 t& `/ j